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

This commit is contained in:
姚宇浩 2024-06-04 15:26:02 +08:00
commit b0ad24d255
14 changed files with 383 additions and 249 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 269 KiB

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/eduImg/pp1.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

BIN
src/assets/eduImg/pp2.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

BIN
src/assets/eduImg/pp3.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

BIN
src/assets/eduImg/xxgk.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -560,11 +560,11 @@ const setChart = () => {
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
pieData[0].value = data.list.nl5160; pieData[0].value = data.list.nl6170;
pieData[1].value = data.list.nl6170; pieData[1].value = data.list.nl7180;
pieData[2].value = data.list.nl7180; pieData[2].value = data.list.nl8190;
pieData[3].value = data.list.nl8190; pieData[3].value = data.list.nl91100;
pieData[4].value = data.list.nl91100; pieData[4].value = data.list.nl100;
getOption(); getOption();
setChart(); setChart();

View File

@ -3,17 +3,43 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import {
onBeforeMount,
onMounted,
ref,
reactive,
defineProps,
watch,
nextTick,
} from "vue";
// echarts // echarts
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM const chart = ref(); // DOM
const data = [120, 200, 150, 80, 70]; const data = reactive({
const lineData = [150, 230, 224, 218, 135]; list: [],
const max = data list1: [],
.concat(lineData) list2: [],
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); // day: [],
option: {},
initialLegendData: ["上门服务时长", "上门服务次数"],
});
// const data1 = [120, 200, 150, 80, 70];
// const lineData = [150, 230, 224, 218, 135];
// const max = data
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //
// //
const color = [ const color = [
{ {
@ -38,255 +64,282 @@ const color = [
], ],
}, },
]; ];
const option = { const getOption = () => {
color, data.option = {
tooltip: { color,
trigger: "axis", tooltip: {
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}", trigger: "axis",
axisPointer: {}, formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
}, axisPointer: {},
legend: {
data: ["上门服务时长", "上门服务次数"],
// top: "8%",
textStyle: {
fontSize: 16,
color: "#ffffff",
}, },
}, legend: {
grid: { data: data.initialLegendData,
top: "18%", // top: "8%",
left: "3%", textStyle: {
right: "6%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
fontSize: 16,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisTick: {
show: false, //
},
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
{
type: "category",
show: false,
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "时长/小时",
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
fontSize: 16,
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
name: "次数/次",
min: 0,
splitLine: {
//线
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
width: 1,
fontSize: 16,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgba(255, 255, 255, 0.3)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16, fontSize: 16,
color: "#ffffff", color: "#ffffff",
lineHeight: 19,
fontFamily: "MicrosoftYaHei",
}, },
}, },
], grid: {
series: [ top: "18%",
{ left: "3%",
z: 1, right: "6%",
yAxisIndex: 0, bottom: "0%",
name: "上门服务时长", containLabel: true,
data: data, color: "#ffffff",
barWidth: 20, fontSize: 16,
type: "bar",
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)" },
],
},
},
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
}, },
{ calculable: true,
yAxisIndex: 1,
name: "上门服务次数", xAxis: [
data: lineData, {
type: "line", //线 type: "category",
label: { axisLabel: {
show: true, //
position: "top", textStyle: {
color: "#ffffff", color: "#ffffff",
formatter: function (data) { fontSize: 16,
return data.value; },
},
axisTick: {
show: false, //
},
data: data.day,
},
{
type: "category",
show: false,
data: data.day,
},
],
yAxis: [
{
type: "value",
scale: true,
name: "时长/小时",
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
fontSize: 16,
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
}, },
}, },
itemStyle: { {
borderColor: "#00FCFF", type: "value",
borderWidth: 1, scale: true,
color: "#00FCFF", name: "次数/次",
min: 0,
splitLine: {
//线
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
width: 1,
fontSize: 16,
},
},
axisLabel: {
//y
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y线
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
}, },
}, {
{ type: "value",
xAxisIndex: 1, max: 100,
yAxisIndex: 2, splitLine: {
itemStyle: { show: false,
color: "rgba(180, 180, 180, 0.2)", // lineStyle: {
type: "solid",
color: "rgba(255, 255, 255, 0.3)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16,
color: "#ffffff",
lineHeight: 19,
fontFamily: "MicrosoftYaHei",
},
}, },
data: data.map(() => 100), ],
barWidth: 40, // series: [
emphasis: { {
z: 1,
yAxisIndex: 0,
name: "上门服务时长",
data: data.list1,
barWidth: 20,
type: "bar",
itemStyle: { itemStyle: {
color: { color: {
type: "linear", type: "linear",
x: 0, x: 0,
x2: 0, x2: 1,
y: 0, y: 0,
y2: 1, y2: 0,
colorStops: [ colorStops: [
{ { offset: 0, color: "rgba(142, 187, 255, .7)" },
offset: 0, { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
color: "rgba(64, 247, 176, 0.25)", { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
}, { offset: 1, color: "rgba(142, 187, 255, .5)" },
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
], ],
}, },
}, },
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
}, },
type: "bar", {
}, yAxisIndex: 1,
// name: "上门服务次数",
{ data: data.list2,
z: 1, type: "line", //线
name: "上部1", label: {
type: "pictorialBar", show: true,
symbolPosition: "end", position: "top",
data: data, color: "#ffffff",
symbol: "diamond", formatter: function (data) {
symbolOffset: ["0%", "-50%"], return data.value;
symbolSize: [22, 15], },
itemStyle: { },
borderColor: "#2fffa4", itemStyle: {
color: "rgba(142, 187, 255, 1)", borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
}, },
}, {
], xAxisIndex: 1,
yAxisIndex: 2,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //
},
data: data.list1.map(() => 100),
barWidth: 40, //
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
type: "bar",
},
//
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
],
};
};
// // 使
// 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();
// // });
// });
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
const setChart1 = () => {
data.list1 = [];
data.list2 = [];
data.list.data.forEach((item) => {
data.list1.push(item.sc); //
data.list2.push(item.fwcs); //
});
}; };
// 使 // 使
onMounted(() => { onBeforeMount(() => {
// domecharts setTimeout(() => {
// var myChart = echarts.init(document.getElementById('main')); data.list = props.list;
// Vue3 data.day = props.list.day;
var myChart = echarts.init(chart.value); // console.log(data.list, "");
setChart1();
// init(); // vue3.2this getOption();
// 使 setChart();
myChart.setOption(option); }, 600);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
}); });
</script> </script>

View File

@ -11,7 +11,11 @@
<eP1 :list="data.xsql"></eP1> <eP1 :list="data.xsql"></eP1>
<div class="t_1"></div> <div class="t_1"></div>
<div class="t_2"> <div class="t_2">
<div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index"> <div
class="t_2_1"
v-for="(item, index) in data.zdgz"
:key="index"
>
<div class="top">{{ item.value }}</div> <div class="top">{{ item.value }}</div>
<div class="t_3"> <div class="t_3">
<div :class="item.cls"></div> <div :class="item.cls"></div>
@ -20,7 +24,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex1" style="margin-top: 30px"> <div
class="flex1"
style="margin-top: 30px"
>
<div class="yd_title left_2"> <div class="yd_title left_2">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -90,6 +97,16 @@
</div> </div>
</div> </div>
<div class="schoolb"> <div class="schoolb">
<img
src="../assets/eduImg/xxgkTop.png"
class="gkTop"
alt=""
>
<img
src="../assets/eduImg/xxgk.gif"
class="gkMove"
alt=""
>
<div class="grade"> <div class="grade">
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">初中</span> <span class="spot">初中</span>
@ -127,7 +144,10 @@
<div style="width: 100%; display: flex; flex-wrap: wrap"> <div style="width: 100%; display: flex; flex-wrap: wrap">
<edie :list="data.xzncxxsl"></edie> <edie :list="data.xzncxxsl"></edie>
<div class="rating"> <div class="rating">
<edXX :list="data.schoolData" :active="selectData.active"></edXX> <edXX
:list="data.schoolData"
:active="selectData.active"
></edXX>
<div class="ratingBtn"> <div class="ratingBtn">
<!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }"> <!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
<span @click="ratingBtn('城市')">城市</span> <span @click="ratingBtn('城市')">城市</span>
@ -202,7 +222,15 @@
<div> <div>
<span class="green">16</span> <span class="green">16</span>
</div> </div>
<img src="@/assets/eduImg/jyImg10.png" alt="" /> <img
src="@/assets/eduImg/jyImg10.png"
alt=""
/>
<img
src="@/assets/eduImg/pp3.gif"
alt=""
class="ppImg"
/>
<div class="historyimg historyimg1"> <div class="historyimg historyimg1">
<span>绿色预警</span> <span>绿色预警</span>
</div> </div>
@ -211,7 +239,15 @@
<div> <div>
<span class="yellow">239</span> <span class="yellow">239</span>
</div> </div>
<img src="@/assets/eduImg/jyImg9.png" alt="" /> <img
src="@/assets/eduImg/jyImg9.png"
alt=""
/>
<img
src="@/assets/eduImg/pp2.gif"
alt=""
class="ppImg"
/>
<div class="historyimg historyimg2"> <div class="historyimg historyimg2">
<span>黄色预警</span> <span>黄色预警</span>
</div> </div>
@ -220,7 +256,15 @@
<div> <div>
<span class="red">139</span> <span class="red">139</span>
</div> </div>
<img src="@/assets/eduImg/jyImg8.png" alt="" /> <img
src="@/assets/eduImg/jyImg8.png"
alt=""
/>
<img
src="@/assets/eduImg/pp1.gif"
alt=""
class="ppImg"
/>
<div class="historyimg historyimg3"> <div class="historyimg historyimg3">
<span>红色预警</span> <span>红色预警</span>
</div> </div>
@ -1050,6 +1094,13 @@ onMounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative;
.ppImg{
position: absolute;
width: 500px;
height: 170px;
}
img { img {
width: 136px; width: 136px;
@ -1241,7 +1292,38 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
padding: 10px 0; padding: 10px 0;
box-sizing: border-box; box-sizing: border-box;
position: relative;
.gkTop {
position: absolute;
top: 4px;
left: 170px;
animation: example 3s infinite linear;
}
@keyframes example {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-3px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(3px);
}
100% {
transform: translateY(0);
}
}
.gkMove {
position: absolute;
top: 4px;
left: -2px;
width: 98%;
height: 96%;
}
span { span {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;

View File

@ -243,12 +243,8 @@
<div class="serviceBox"> <div class="serviceBox">
<div class="serviceTop"> <div class="serviceTop">
<div class="visit"> <div class="visit">
<img <img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
class="serviceimg" <ylSMFW :list="data.smfwcs"></ylSMFW>
src="@/assets/YLimg/ylimg8.png"
alt=""
/>
<ylSMFW></ylSMFW>
</div> </div>
<div class="medicalService"> <div class="medicalService">
<img <img
@ -389,6 +385,7 @@ const chooseVillage = (village) => {
}; };
const close = () => { const close = () => {
dialogShow.value = false; dialogShow.value = false;
pagination.currentPage = 1;
}; };
const handlePagination = (current) => { const handlePagination = (current) => {
pagination.currentPage = current; pagination.currentPage = current;
@ -433,6 +430,7 @@ const data = reactive({
yljgzlzx: { yljg: "", zlzx: "" }, yljgzlzx: { yljg: "", zlzx: "" },
zccs1: [], zccs1: [],
zccs2: [], zccs2: [],
smfwcs: [],
}); });
onBeforeMount(async () => { onBeforeMount(async () => {
getData(); getData();
@ -495,6 +493,7 @@ const getData = async () => {
data.yljgzlzx.yljg = res.data.yljgzlzx.yljg; data.yljgzlzx.yljg = res.data.yljgzlzx.yljg;
data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx; data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx;
// //
data.smfwcs = res.data.zlfw.smfwcs;
// //
res.data.zlfw.xzzccs.forEach((element) => { res.data.zlfw.xzzccs.forEach((element) => {
data.zccs1.push(element.xzjd); // data.zccs1.push(element.xzjd); //

View File

@ -8,7 +8,7 @@ export default defineConfig({
server: { server: {
host: "0.0.0.0", //解决vite use--host to expose host: "0.0.0.0", //解决vite use--host to expose
port: 8080, port: 8080,
open: true, open: false,
base: "./ ", //生产环境路径 base: "./ ", //生产环境路径
// hmr: true, // hmr: true,
proxy: { proxy: {