xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
姚宇浩 2024-07-02 10:35:51 +08:00
parent eaca2116f7
commit e59a72cc31
4 changed files with 158 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/view/echarts_hygiene/tnb.vue
View File

@ -3,7 +3,14 @@
</template> </template>
<script setup > <script setup >
import { onMounted, reactive, ref,onBeforeMount,defineProps } from "vue"; import {
onMounted,
reactive,
ref,
onBeforeMount,
defineProps,
watch,
} from "vue";
// 局部引入echarts核心模块 // 局部引入echarts核心模块
import * as echarts from "echarts"; import * as echarts from "echarts";
@ -15,14 +22,14 @@ const props = defineProps({
year: { year: {
type: Array, type: Array,
default: () => [], default: () => [],
} },
}); });
const data = reactive({ const data = reactive({
list: [], list: [],
year: [], year: [],
option: {}, option: {},
bg: [], bg: [],
}) });
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const getOption = () => { const getOption = () => {
@ -102,7 +109,7 @@ const getOption = () => {
label: { label: {
show: true, show: true,
color: "#ffffff", color: "#ffffff",
position:'top', position: "top",
formatter: function (data) { formatter: function (data) {
return data.value; return data.value;
}, },
@ -120,7 +127,7 @@ const getOption = () => {
{ {
offset: 0, offset: 0,
// color: 'RGBA(184, 204, 241, 1)' // color: 'RGBA(184, 204, 241, 1)'
color: 'rgba(255, 234, 90, 0.50)', color: "rgba(255, 234, 90, 0.50)",
}, },
{ {
offset: 1, offset: 1,
@ -136,27 +143,41 @@ const getOption = () => {
}, },
], ],
}; };
};
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 = () => { const setChart = () => {
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option); myChart.setOption(data.option);
} };
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list data.list = props.list;
data.year = props.year data.year = props.year;
data.year.forEach(() => { data.year.forEach(() => {
data.bg.push(0) data.bg.push(0);
}) });
getOption() getOption();
setChart() setChart();
}, 600) }, 600);
}); });
</script> </script>
<style scoped> <style scoped>

16
src/view/hygiene.vue
View File

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

7
src/view/sy.vue
View File

@ -229,9 +229,9 @@
<img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" /> <img class="sexMove" src="../assets/images/sy/sexImg.png" alt="" />
</div> </div>
</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"> <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 <div
class="btList" class="btList"
ref="mainRef" ref="mainRef"
@ -623,6 +623,8 @@ import qyfw1 from "../assets/images/sy/ljzcs.png";
import qyfw2 from "../assets/images/sy/rzbms.png"; import qyfw2 from "../assets/images/sy/rzbms.png";
import qyfw3 from "../assets/images/sy/shqys.png"; import qyfw3 from "../assets/images/sy/shqys.png";
import qyfw4 from "../assets/images/sy/dxje.png"; import qyfw4 from "../assets/images/sy/dxje.png";
//控制echart的显示
const showEchart=ref(true)
// 详情弹框 // 详情弹框
const dialogShow = ref(false); const dialogShow = ref(false);
const dialogShowEc = ref(false); const dialogShowEc = ref(false);
@ -1270,6 +1272,7 @@ const getData = async () => {
data.jtsyList[4].key2_value = data.jtsyList[4].key2_value =
res.data.transportation.highSpeedRail.passengerFlow; res.data.transportation.highSpeedRail.passengerFlow;
} }
showEchart.value=true;
}); });
}; };
//获取表格数据 //获取表格数据

18
src/view/yl.vue
View File

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