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

This commit is contained in:
duanxiaohai 2024-07-02 10:45:02 +08:00
commit 770abf1cc6
4 changed files with 158 additions and 132 deletions

View File

@ -3,7 +3,14 @@
</template>
<script setup >
import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue";
import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
} from "vue";
// echarts
import * as echarts from "echarts";
@ -12,151 +19,165 @@ const props = defineProps({
type: Array,
default: () => [],
},
year:{
year: {
type: Array,
default: () => [],
}
},
});
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
});
const data= reactive({
list:[],
year:[],
option:{},
bg:[],
})
const chart = ref(); // DOM
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} ",
},
grid: {
top: "5%",
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
padding: [20, 10, 20, 10],
formatter: "{b0}<br />{a1}:{c1} ",
},
grid: {
top: "5%",
left: "1%",
right: "10%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
// splitArea: {
// show: true,
// interval: '10',
// areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"],
// width:10,
// },
// },
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
xAxis: {
type: "category",
// boundaryGap: false,
data: data.year,
// splitArea: {
// show: true,
// interval: '10',
// areaStyle: {
// color: ["rgba(255, 255, 255, 0.10)"],
// width:10,
// },
// },
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
},
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
yAxis: {
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
},
},
series: [
{
name: "背景",
type: "bar",
data: data.bg,
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
{
name: "糖尿病人数",
type: "line",
stack: "Total",
symbol: "emptyCircle",
{
name: "糖尿病人数",
type: "line",
stack: "Total",
symbol: "emptyCircle",
symbolSize: 10,
itemStyle: {
borderColor: "#E8FF00",
borderWidth: 1,
color: "#E8FF00",
},
label: {
symbolSize: 10,
itemStyle: {
borderColor: "#E8FF00",
borderWidth: 1,
color: "#E8FF00",
},
label: {
show: true,
color: "#ffffff",
position:'top',
position: "top",
formatter: function (data) {
return data.value;
},
},
areaStyle: {
color: "#F4F65B",
normal: {
//线4x0,y0,x2,y2(0~1);true
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
// color: 'RGBA(184, 204, 241, 1)'
color: 'rgba(255, 234, 90, 0.50)',
},
{
offset: 1,
color: "rgba(255, 234, 90, 0)",
},
],
false
),
shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
areaStyle: {
color: "#F4F65B",
normal: {
//线4x0,y0,x2,y2(0~1);true
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
// color: 'RGBA(184, 204, 241, 1)'
color: "rgba(255, 234, 90, 0.50)",
},
{
offset: 1,
color: "rgba(255, 234, 90, 0)",
},
],
false
),
shadowBlur: 0, //shadowBlurshadowColor,shadowOffsetX/Y,
},
},
data: data.list,
},
data: data.list,
},
],
],
};
};
}
watch(
() => props.list,
(newValue, oldValue) => {
setTimeout(() => {
data.list = props.list;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
}
);
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
}
};
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list
data.year = props.year
data.year.forEach(()=>{
data.bg.push(0)
})
getOption()
setChart()
}, 600)
data.list = props.list;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
getOption();
setChart();
}, 600);
});
</script>
<style scoped>

View File

@ -9,7 +9,7 @@
</div>
<span class="text">
<img
v-if="leftchoose.first == '1'"
v-if="leftchoose.first == '1' "
src="@/assets/images/hygiene/yb_1.png"
class="c"
style="width: 160px"
@ -35,7 +35,7 @@
</span>
</div>
<ePie
v-if="leftchoose.first == '1'"
v-if="leftchoose.first == '1' && showEchart"
:list="data.medicalInsurance.ffrc"
:year="data.medicalInsurance.year"
></ePie>
@ -54,9 +54,9 @@
</div>
</div>
<div class="sm_title_1"></div>
<tnb :list="data.lmb.tnbrs" :year="data.lmb.year"></tnb>
<tnb :list="data.lmb.tnbrs" :year="data.lmb.year" v-if="showEchart"></tnb>
<div class="sm_title_2"></div>
<gxy :list="data.lmb.gxyrs" :year="data.lmb.year"></gxy>
<gxy :list="data.lmb.gxyrs" :year="data.lmb.year" v-if="showEchart"></gxy>
</div>
</div>
<div class="displayFlex center_bg">
@ -114,7 +114,7 @@
<div class="minTopPart2">
<div class="left">
<div class="leftImg">
<eP4 :list="data.jkda.jdl"></eP4>
<eP4 :list="data.jkda.jdl" v-if="showEchart"></eP4>
</div>
<div class="left_me">
<div>建档率</div>
@ -123,7 +123,7 @@
</div>
<div class="right">
<div class="rightImg">
<eP4_1 :list="data.jkda.jtysqyl"></eP4_1>
<eP4_1 :list="data.jkda.jtysqyl" v-if="showEchart"></eP4_1>
</div>
<div class="right_me">
<div>家庭医生签约率</div>
@ -141,7 +141,7 @@
</div>
</div>
<!-- <div style="width: 100%; "> -->
<eP5 :list="data.jsbgl"></eP5>
<eP5 :list="data.jsbgl" v-if="showEchart"></eP5>
<!-- </div> -->
</div>
</div>
@ -177,7 +177,7 @@
<i></i>
</div>
</div>
<eP7 :list="data.jktj.jktjrs" :year="data.jktj.year"></eP7>
<eP7 :list="data.jktj.jktjrs" :year="data.jktj.year" v-if="showEchart"></eP7>
</div>
<div class="flex1">
<div class="yd_title last">
@ -216,6 +216,7 @@ import tnb from "./echarts_hygiene/tnb.vue";
import gxy from "./echarts_hygiene/gxy.vue";
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import http from "@/utils/request.js";
const showEchart=ref(true)
const leftchoose = ref({
first: "1",
second: "1",
@ -292,6 +293,7 @@ const getData = async () => {
data.fyglrs = res.data.fyglrs;
data.jktj = res.data.jktj;
data.jkhd = res.data.jkhd;
showEchart.value=true;
}
});
};

View File

@ -229,9 +229,9 @@
<img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
</div>
</div>
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
<ePie2 style="margin-top: 20px" :list="data.ageRatio" v-if="showEchart"></ePie2>
<div class="bt">
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
<ePie style="margin-bottom: 20px" :list="data.ageGroup" v-if="showEchart"></ePie>
<div
class="btList"
ref="mainRef"
@ -623,6 +623,8 @@ import qyfw1 from "../assets/images/sy/ljzcs.png";
import qyfw2 from "../assets/images/sy/rzbms.png";
import qyfw3 from "../assets/images/sy/shqys.png";
import qyfw4 from "../assets/images/sy/dxje.png";
//echart
const showEchart=ref(true)
//
const dialogShow = ref(false);
const dialogShowEc = ref(false);
@ -1270,6 +1272,7 @@ const getData = async () => {
data.jtsyList[4].key2_value =
res.data.transportation.highSpeedRail.passengerFlow;
}
showEchart.value=true;
});
};
//

View File

@ -36,7 +36,7 @@
</span>
</div>
<ePie
v-if="leftchoose.first == '1' && showR"
v-if="leftchoose.first == '1' && showEchart"
:list1="data.leftTop1"
:list2="data.leftTop2"
:year="data.leftTopYear"
@ -82,7 +82,7 @@
</span>
</div>
<eP2
v-if="leftchoose.second == '1' && showR"
v-if="leftchoose.second == '1' && showEchart"
:list1="data.leftCenter1"
:list2="data.leftCenter2"
:year="data.leftCenterYear"
@ -128,7 +128,7 @@
</span>
</div>
<eP3
v-if="leftchoose.third == '1' && showR"
v-if="leftchoose.third == '1' && showEchart"
:list1="data.leftbottom1"
:list2="data.leftbottom2"
:year="data.leftbottomYear"
@ -170,7 +170,7 @@
</div>
</div>
<div class="ageGroupone">
<ePie3d v-if="showR" :list="data.rkgk"></ePie3d>
<ePie3d v-if="showEchart" :list="data.rkgk"></ePie3d>
<div class="btList" ref="mainRef">
<div class="btListding">
<span>各年龄段</span>
@ -201,7 +201,7 @@
</div>
</div>
<ylJHSY
v-if="showR"
v-if="showEchart"
:list1="data.centerBottom1"
:list2="data.centerBottom2"
:year="data.centerBottomYear"
@ -265,7 +265,7 @@
<div class="serviceTop">
<div class="visit">
<img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
<ylSMFW v-if="showR" :list="data.smfwcs"></ylSMFW>
<ylSMFW v-if="showEchart" :list="data.smfwcs"></ylSMFW>
</div>
<div class="medicalService">
<img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
@ -287,7 +287,7 @@
/>
</div>
<ylXZZC
v-if="showR"
v-if="showEchart"
:list1="data.zccs1"
:list2="data.zccs2"
@village="chooseVillage"
@ -336,7 +336,7 @@ const leftchoose = ref({
second: "1",
third: "1",
});
const showR = ref(false);
const showEchart = ref(false);
//
const dialogShow = ref(false);
const tableType = reactive({
@ -662,7 +662,7 @@ const getData = () => {
data.zccs2.push(element.zccs); //
});
}
showR.value = true;
showEchart.value = true;
});
};
</script>