This commit is contained in:
duanxiaohai
commit
9c3fb010a9
|
|
@ -10,6 +10,7 @@
|
|||
"dependencies": {
|
||||
"echarts": "^5.4.2",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"sass": "^1.60.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
|
|
@ -263,6 +264,14 @@
|
|||
"echarts": "^5.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts-liquidfill": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz",
|
||||
"integrity": "sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==",
|
||||
"peerDependencies": {
|
||||
"echarts": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.17.14",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.14.tgz",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
"dependencies": {
|
||||
"echarts": "^5.4.2",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts-liquidfill": "^3.1.0",
|
||||
"sass": "^1.60.0",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
|
|
@ -1,22 +1,24 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<img class="title" src="../assets/img_07.png" alt="" />
|
||||
<!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
|
||||
<div class="time">
|
||||
<div id="clock">加载中...</div>
|
||||
<div id="date-display"></div>
|
||||
<div id="clock" style="margin-top: 4px;">加载中...</div>
|
||||
</div>
|
||||
|
||||
<div class="header-menu">
|
||||
<ul class="header-menu-item header-menu-left">
|
||||
<li v-for="item in data.urlLeft.slice(0, 3)" :key="item.name">
|
||||
<span class="header-menu-on" @click="to(item.url)">{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="header-menu-item header-menu-right">
|
||||
<li v-for="item in data.urlLeft.slice(3, 6)" :key="item.name">
|
||||
<span class="header-menu-on" @click="to(item.url)">{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="header-menu-item header-menu-left">
|
||||
<div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 3)"
|
||||
:key="item.name">
|
||||
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-menu-item header-menu-right">
|
||||
<div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(3, 6)"
|
||||
:key="item.name">
|
||||
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -40,18 +42,18 @@ const updateClock = () => {
|
|||
//拼接时间字符串
|
||||
const timeString = `${hours}:${minutes}:${seconds}`;
|
||||
|
||||
const formattedDate = year + "-" + month + "-" + day;
|
||||
const formattedDate = year + "/" + month + "/" + day;
|
||||
|
||||
// 更新页面上的时钟显示
|
||||
document.getElementById("clock").textContent = timeString;
|
||||
// 将格式化后的日期更新到 div 中
|
||||
document.getElementById("date-display").innerText = formattedDate;
|
||||
};
|
||||
const to =(url)=>{
|
||||
const to = (url) => {
|
||||
router.push({
|
||||
path: `${url}`,
|
||||
|
||||
});
|
||||
data.nowTab = url
|
||||
}
|
||||
const router = useRouter();
|
||||
const routers = useRoute();
|
||||
|
|
@ -60,49 +62,52 @@ const data = reactive({
|
|||
urlLeft: [
|
||||
{
|
||||
name: "主页",
|
||||
url:'/home/index',
|
||||
url: '/home/index',
|
||||
},
|
||||
{
|
||||
name: "养老",
|
||||
url:'/home/yl',
|
||||
url: '/home/yl',
|
||||
},
|
||||
{
|
||||
name: "卫生",
|
||||
url:'/home/hygiene',
|
||||
url: '/home/hygiene',
|
||||
},
|
||||
{
|
||||
name: "教育",
|
||||
url:'/home/education',
|
||||
url: '/home/education',
|
||||
},
|
||||
{
|
||||
name: "就业救助",
|
||||
url:'/home/work',
|
||||
url: '/home/work',
|
||||
},
|
||||
{
|
||||
name: "智能分析",
|
||||
url:'/home/analyze',
|
||||
url: '/home/analyze',
|
||||
},
|
||||
],
|
||||
nowTab: "0",
|
||||
nowTab: "/home/index",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 初始调用 updateClock 以立即显示时间
|
||||
updateClock();
|
||||
|
||||
data.nowTab = router.currentRoute.value.fullPath
|
||||
|
||||
// 每隔一秒钟调用一次 updateClock 以更新时钟显示
|
||||
setInterval(updateClock, 1000);
|
||||
});
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.header {
|
||||
// background-image: url(../assets/header.png);
|
||||
// background-size: 100% 100%;
|
||||
background-image: url(../assets/headerBg.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
height: 80px;
|
||||
height: 112px;
|
||||
width: 100%;
|
||||
background-color: beige;
|
||||
// background-color: beige;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -111,15 +116,19 @@ onMounted(() => {
|
|||
width: 146px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
// align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&-menu {
|
||||
// position: absolute;
|
||||
// left:20%;
|
||||
|
|
@ -147,26 +156,66 @@ onMounted(() => {
|
|||
top: 0;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
&-item {
|
||||
height: 80px;
|
||||
width: 600px;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: space-around;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-left {
|
||||
left: 10%;
|
||||
left: 8%;
|
||||
}
|
||||
|
||||
&-right {
|
||||
left: 60%;
|
||||
right: 8%;
|
||||
}
|
||||
|
||||
.leftItem {
|
||||
background-image: url(../assets/headLeft.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
height: 62px;
|
||||
width: 160px;
|
||||
margin: 0 -14px;
|
||||
}
|
||||
|
||||
.leftItemC {
|
||||
background-image: url(../assets/headLeftC.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
height: 62px;
|
||||
width: 160px;
|
||||
margin: 0 -14px;
|
||||
}
|
||||
|
||||
.rightItem {
|
||||
background-image: url(../assets/headRight.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
height: 62px;
|
||||
width: 160px;
|
||||
margin: 0 -14px;
|
||||
}
|
||||
|
||||
.rightItemC {
|
||||
background-image: url(../assets/headRightC.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
height: 62px;
|
||||
width: 160px;
|
||||
margin: 0 -14px;
|
||||
}
|
||||
|
||||
.itemText {
|
||||
width: 150px;
|
||||
height: 62px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
line-height: 62px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,219 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 50%; height: 160px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-liquidfill";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
|
||||
const liq = reactive({ //chart数据
|
||||
value: 0.18,
|
||||
})
|
||||
|
||||
const Pie = () => {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 50,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#00AFFF',
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
borderWidth: 0,
|
||||
borderColor: 'rgba(0,0,0,0)',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
value: liq.value, // 内容 配合formatter
|
||||
type: 'liquidFill',
|
||||
radius: '70%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
liq.value,
|
||||
{
|
||||
value: liq.value,
|
||||
direction: 'left', //波浪方向
|
||||
},
|
||||
], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: 'rgba(62, 208, 255, 1)', // 球体本景色
|
||||
},
|
||||
amplitude: '6 %', //波浪的振幅
|
||||
// 修改波浪颜色
|
||||
// color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#6CDEFC',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: '#429BF7',
|
||||
},
|
||||
],
|
||||
globalCoord: false,
|
||||
},
|
||||
],
|
||||
label: {
|
||||
normal: {
|
||||
// formatter: 0.87 * 100 + '\n%',
|
||||
// formatter: 0.6 * 100 + '{d|%}',
|
||||
formatter: function(params){
|
||||
return params.value * 100 + "%";
|
||||
},
|
||||
rich: {
|
||||
d: {
|
||||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
},
|
||||
outline: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
z: 1,
|
||||
center: ['50%', '50%'],
|
||||
radius: ['72%', '73.5%'], // 控制外圈圆的粗细
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
value: 500,
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#00AFFF',
|
||||
},
|
||||
emphasis: {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#00AFFF',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
//外发光
|
||||
type: 'pie',
|
||||
z: 1,
|
||||
zlevel: -1,
|
||||
radius: ['70%', '90.5%'],
|
||||
center: ['50%', '50%'],
|
||||
hoverAnimation: false,
|
||||
clockWise: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 20,
|
||||
color: 'rgba(224,242,255,1)',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: [100],
|
||||
},
|
||||
// {
|
||||
// //底层外发光
|
||||
// type: 'pie',
|
||||
// z: 1,
|
||||
// zlevel: -2,
|
||||
// radius: ['70%', '100%'],
|
||||
// center: ['50%', '50%'],
|
||||
// hoverAnimation: false,
|
||||
// clockWise: false,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// borderWidth: 20,
|
||||
// color: 'rgba(224,242,255,.4)',
|
||||
// },
|
||||
// },
|
||||
// label: {
|
||||
// show: false,
|
||||
// },
|
||||
// data: [100],
|
||||
// },
|
||||
{
|
||||
type: 'pie',
|
||||
zlevel: 0,
|
||||
silent: true,
|
||||
radius: ['78%', '80%'],
|
||||
z: 1,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: Pie(),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value);
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
|
|
@ -68,12 +68,11 @@ onBeforeMount(() => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
background-color: rgba(8, 35, 68, 1);
|
||||
background-image: url("../assets/bgImg.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-repeat: no-repeat;
|
||||
background-position-y: bottom;
|
||||
background-size: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,29 +2,39 @@
|
|||
<div class="module">
|
||||
<div class="displayFlex">
|
||||
<div class="flex1">
|
||||
<div class="yd_title">
|
||||
<span class="text">助乡兴趣点</span>
|
||||
<div class="yd_title left_1">
|
||||
<span class="text">
|
||||
<img
|
||||
src="@/assets/images/ylbx_1.png"
|
||||
style="width: 130px; height: 30px"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/images/ylbx_2.png"
|
||||
style="width: 130px; height: 30px"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<ePie></ePie>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title">
|
||||
<span class="text">基本信息</span>
|
||||
</div>
|
||||
<eP2></eP2>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title">
|
||||
<span class="text">基本信息</span>
|
||||
<div class="yd_title left_3">
|
||||
<!-- <span class="text">基本信息</span> -->
|
||||
</div>
|
||||
<eP3></eP3>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_3">
|
||||
<!-- <span class="text">基本信息</span> -->
|
||||
</div>
|
||||
<eP2></eP2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex">
|
||||
<div class="flex1">
|
||||
<div class="yd_title">
|
||||
<span class="text">活动数据分析</span>
|
||||
</div>
|
||||
<waterBall></waterBall>
|
||||
<ePie3d></ePie3d>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
|
|
@ -144,6 +154,7 @@ import eP3 from "./echarts/eP3.vue";
|
|||
import ePie2 from "./echarts/pie2.vue";
|
||||
import eGraph from "./echarts/graph.vue";
|
||||
import ePie3d from "./echarts/pie3d.vue";
|
||||
// import waterBall from "./echarts/waterBall.vue";
|
||||
import ylJHSY from "./echarts/ylJHSY.vue";
|
||||
import ylSMFW from "./echarts/ylSMFW.vue";
|
||||
import ylXZZC from "./echarts/ylXZZC.vue";
|
||||
|
|
@ -157,7 +168,7 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
}
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
padding: 0 38px;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex2 {
|
||||
|
|
@ -170,20 +181,22 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
}
|
||||
|
||||
.yd_title {
|
||||
background-image: url(@/assets/img_04.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background-image: url(@/assets/img_04.png);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
position: relative;
|
||||
.text {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
font-family: SourceHanSansCN;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
right: 33px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
|
@ -246,6 +259,28 @@ import ylXZZC from "./echarts/ylXZZC.vue";
|
|||
}
|
||||
}
|
||||
|
||||
.left_1 {
|
||||
background-image: url(@/assets/images/ylbx.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left_2 {
|
||||
background-image: url(@/assets/images/gllrbt.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left_3 {
|
||||
background-image: url(@/assets/images/tkjz.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.text_1_left {
|
||||
// background-image: url(@/assets/images/ylbx_1.png);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.basicInformation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -270,6 +270,11 @@ echarts-gl@^2.0.9:
|
|||
claygl "^1.2.1"
|
||||
zrender "^5.1.1"
|
||||
|
||||
echarts-liquidfill@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz"
|
||||
integrity sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==
|
||||
|
||||
echarts@^5.4.2:
|
||||
version "5.4.2"
|
||||
resolved "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz"
|
||||
|
|
|
|||
Loading…
Reference in New Issue