Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
姚宇浩 2024-04-15 13:34:49 +08:00
commit 57a31691e3
18 changed files with 609 additions and 51 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/YLimg/ylimg5.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/YLimg/ylimg6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/YLimg/ylimg7.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/YLimg/ylimg8.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/YLimg/ylimg9.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/headLeft.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/assets/headLeftC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
src/assets/headRight.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/assets/headRightC.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
src/assets/headerBg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

BIN
src/assets/minTopBg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

View File

@ -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;
}
}
}

118
src/view/echarts/ylJHSY.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div ref="chart" style="width: 100%; height: 220px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#ff0000", //
},
},
},
legend: {
data: ["计划生育人数", "计划生育补贴金额"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
color: "rgba(0, 252, 255, 1)",
xAxis: [
{
// type: "category",
// scale: true,
// name: "/",
data: ["2019", "2020", "2021", "2022", "2023"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "计划生育人数",
color: "rgba(255, 252, 0, 1)",
},
{
type: "value",
scale: true,
name: "计划生育补贴金额/元",
position: "right",
max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
// alignTicks: true,
// offset: 80,
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }
// },
// axisLabel: {
// formatter: '{value} ml'
// }
},
],
series: [
{
name: "计划生育人数",
type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
]),
}, //
},
{
name: "计划生育补贴金额",
type: "line", //线
data: [2.6, 5.9, 9.0, 16.4, 28.7],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

118
src/view/echarts/ylSMFW.vue Normal file
View File

@ -0,0 +1,118 @@
<template>
<div ref="chart" style="width: 100%; height: 220px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#ff0000", //
},
},
},
legend: {
data: ["上门服务时长", "上门服务次数"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
color: "rgba(0, 252, 255, 1)",
xAxis: [
{
// type: "category",
// scale: true,
// name: "",
data: ["4-07", "4-08", "4-09", "4-10", "4-11"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "上门服务时长",
color: "rgba(255, 252, 0, 1)",
},
{
type: "value",
scale: true,
name: "上门服务次数",
position: "right",
max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
// alignTicks: true,
// offset: 80,
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }
// },
// axisLabel: {
// formatter: '{value} ml'
// }
},
],
series: [
{
name: "上门服务时长",
type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#83bff6" },
{ offset: 0.5, color: "#188df0" },
{ offset: 1, color: "#188df0" },
]),
}, //
},
{
name: "上门服务次数",
type: "line", //线
data: [2.6, 5.9, 9.0, 16.4, 28.7],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

125
src/view/echarts/ylXZZC.vue Normal file
View File

@ -0,0 +1,125 @@
<template>
<div ref="chart" style="width: 100%; height: 220px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const chart = ref(); // DOM
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
backgroundColor: "#ff0000", //
},
},
},
legend: {
data: ["计划生育人数", "计划生育补贴金额"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
color: "#ffffff",
},
calculable: true,
color: "rgba(0, 252, 255, 1)",
xAxis: [
// {
// // type: "category",
// // scale: true,
// // name: "/",
// },
{
type: "value",
scale: true,
name: "计划生育人数",
color: "rgba(255, 252, 0, 1)",
},
{
type: "value",
scale: true,
name: "计划生育补贴金额/元",
position: "right",
max: 1200,
min: 0,
boundaryGap: [0.2, 0.2]
// alignTicks: true,
// offset: 80,
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }
// },
// axisLabel: {
// formatter: '{value} ml'
// }
},
],
yAxis: {
type: 'category',
data: ["2019", "2020", "2021", "2022", "2023"],
}
,
series: [
{
name: "计划生育人数",
type: "bar",
data: [2.0, 4.9, 7.0, 23.2, 25.6],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "rgba(26,255,217,0)" },
{ offset: 0.5, color: "#00B7FF" },
{ offset: 1, color: "#00B7FF" },
]), //
borderRadius: [0, 0, 50, 0],
},
},
{
name: "计划生育补贴金额",
type: "line", //线
data: [2.6, 5.9, 9.0, 16.4, 28.7],
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
});
</script>
<style scoped></style>

View File

@ -100,10 +100,10 @@
<ePie3d></ePie3d>
</div>
<div class="flex1">
<div class="yd_title">
<span class="text">走访日志</span>
<div class="yd_title familyPlanning">
<!-- <span class="text">计划生育</span> -->
</div>
<div class="visitLog">
<!-- <div class="visitLog">
<div class="visitLog_item">
<img src="../assets/img_02.png" width="48px" height="51px" alt="" />
<div class="visitLog_item_box">
@ -131,28 +131,78 @@
</div>
<span class="check">点击查看</span>
</div>
</div> -->
<div style="width: 490px; height: 400px">
<ylJHSY></ylJHSY>
</div>
</div>
</div>
<div class="displayFlex">
<div class="flex1">
<div class="yd_title">
<span class="text">养老机构</span>
<div class="flex2">
<div class="yd_title mechanism">
<!-- <span class="text">养老机构</span> -->
</div>
<div class="history">
<p>2002年至2009年担任浙江大学计算机学院和软件学院院长</p>
<!-- <p>2002年至2009年担任浙江大学计算机学院和软件学院院长</p>
<p>1984年获得浙江大学计算机应用专业硕士学位之后留校任教</p>
<p>1990年获得浙江大学计算机应用专业博士学位</p>
<p>1994年至1996年担任浙江大学计算机系副系主任</p>
<p>1997年至2002年担任浙江大学计算机系系主任</p>
<p>2002年至2009年担任浙江大学计算机学院和软件学院院长</p>
<p>2002年至2009年担任浙江大学计算机学院和软件学院院长</p> -->
<div class="history1">
<div>
<span>16<span class="unit"></span></span>
</div>
<img src="@/assets/YLimg/ylimg2.png" alt="" />
<img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
</div>
<div class="history1">
<div>
<span>239 <span class="unit"></span> </span>
</div>
<img src="@/assets/YLimg/ylimg3.png" alt="" />
<img class="historyimg" src="@/assets/YLimg/ylimg6.png" alt="" />
</div>
<div class="history1">
<div>
<span>139<span class="unit"></span></span>
</div>
<img src="@/assets/YLimg/ylimg4.png" alt="" />
<img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
</div>
</div>
</div>
<div class="flex1">
<div class="yd_title">
<span class="text">助老服务</span>
<div class="yd_title service">
<!-- <span class="text">助老服务</span> -->
</div>
<div class="serviceBox">
<div class="serviceTop">
<div class="visit">
<img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
<div style="width: 290px">
<ylSMFW></ylSMFW>
</div>
</div>
<div class="medicalService">
<img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
<div class="medicalServiceTop">
<img class="ylimg" src="@/assets/YLimg/ylimg1.png" alt="" />
<span>18,789</span>
</div>
</div>
</div>
<div class="mealAssistance">
<img
class="mealAssistanceimg"
src="@/assets/YLimg/ylimg7.png"
alt=""
/>
<div style="width: 490px">
<ylXZZC></ylXZZC>
</div>
</div>
</div>
<eBubble></eBubble>
</div>
</div>
</div>
@ -167,7 +217,10 @@ import eP3_2 from "./echarts/eP3_2.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 waterBall from "./echarts/waterBall.vue";
import ylJHSY from "./echarts/ylJHSY.vue";
import ylSMFW from "./echarts/ylSMFW.vue";
import ylXZZC from "./echarts/ylXZZC.vue";
import { ref, onMounted, onBeforeMount } from "vue";
const leftchoose = ref({
first: "1",
@ -190,6 +243,11 @@ const change = (name, index) => {
padding: 0 28px;
box-sizing: border-box;
}
.flex2 {
// flex: 1;
padding: 0 38px;
box-sizing: border-box;
}
.module {
display: flex;
}
@ -214,6 +272,65 @@ const change = (name, index) => {
top: 3px;
}
}
.familyPlanning {
background-image: url(@/assets/YLTitle/titleImg9.png);
}
.mechanism {
background-image: url(@/assets/YLTitle/titleImg10.png);
}
.service {
background-image: url(@/assets/YLTitle/titleImg11.png);
}
.serviceBox {
display: flex;
flex-direction: column;
.serviceimg {
width: 182px;
height: 35px;
}
.serviceTop {
display: flex;
justify-content: space-between;
.medicalService {
display: flex;
flex-direction: column;
align-items: center;
.ylimg {
width: 205px;
height: 239px;
}
.medicalServiceTop {
position: relative;
span {
position: absolute;
left: 38px;
top: 35%;
font-weight: bold;
font-size: 36px;
color: #ffffff;
line-height: 41px;
letter-spacing: 1px;
text-align: center;
font-style: normal;
font-family: DINAlternate, DINAlternate;
}
}
}
}
.mealAssistance {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.mealAssistanceimg {
width: 495px;
height: 35px;
}
}
}
.left_1 {
background-image: url(@/assets/images/ylbx.png);
background-repeat: no-repeat;
@ -322,6 +439,37 @@ const change = (name, index) => {
.history {
padding-top: 12px;
display: flex;
.history1 {
font-size: 26px;
color: #ffffff;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
font-style: normal;
font-family: PangMenZhengDao;
display: flex;
flex-direction: column;
align-items: center;
.unit {
font-weight: 500;
font-size: 14px;
color: #9cdeff;
line-height: 20px;
text-align: left;
font-style: normal;
font-family: PingFangSC, PingFang SC;
}
.historyimg {
width: 182px;
height: 35px;
}
}
img {
width: 154px;
height: 136px;
}
p {
margin-top: 12px;
font-size: 12px;