This commit is contained in:
姚宇浩 2024-10-22 09:10:14 +08:00
commit 218fb927d9
10 changed files with 206 additions and 167 deletions

View File

@ -339,7 +339,7 @@ onBeforeUnmount(() => {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
height: 62px; height: 62px;
width: 160px; width: 190px;
margin: 0 -14px; margin: 0 -14px;
} }
@ -348,7 +348,7 @@ onBeforeUnmount(() => {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
height: 62px; height: 62px;
width: 160px; width: 190px;
margin: 0 -14px; margin: 0 -14px;
} }
@ -357,7 +357,7 @@ onBeforeUnmount(() => {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
height: 62px; height: 62px;
width: 160px; width: 190px;
margin: 0 -14px; margin: 0 -14px;
} }
@ -366,17 +366,17 @@ onBeforeUnmount(() => {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
height: 62px; height: 62px;
width: 160px; width: 190px;
margin: 0 -14px; margin: 0 -14px;
} }
.itemText { .itemText {
width: 150px; width: 160px;
height: 62px; height: 62px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
line-height: 62px; line-height: 62px;
font-size: 18px; font-size: 22px;
color: #fff; color: #fff;
} }
} }

View File

@ -66,7 +66,8 @@
:data="data.tableData" :data="data.tableData"
height="390px" height="390px"
max-height="390" max-height="390"
:header-cell-style="{ background: 'rgba(0, 143, 205, 0.63)' }" :header-cell-style="{ background: 'rgba(0, 143, 205, 0.63)', fontSize:' 22px' }"
:row-style="rowState"
@row-click="handleRowClick" @row-click="handleRowClick"
stripe stripe
> >
@ -185,7 +186,16 @@ const props = defineProps({
}, },
}); });
const emit = defineEmits(["close", "handle", "showList"]); const emit = defineEmits(["close", "handle", "showList"]);
const rowState = (row) => {
return {
fontSize: "19px",
lineHeight: "33px",
// letterSpacing: "1px",
// height: "36px",
// backgroundColor: "rgba(43, 74, 121, 1)",
// color: "#fff",
};
};
const handleRowClick = (row, column, event) => { const handleRowClick = (row, column, event) => {
emit("showList", row); emit("showList", row);
}; };
@ -396,10 +406,13 @@ const closeDialog = () => {
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 18px; font-size: 22px;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 46px; margin-top: 46px;
span{
font-size: 22px;
}
img { img {
width: 36px; width: 36px;
height: 36px; height: 36px;

View File

@ -291,10 +291,11 @@ const handle = (current) => {
padding: 20px; padding: 20px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 16px; // font-size: 16px;
font-size: 22px;
letter-spacing: 3px; letter-spacing: 3px;
color: #ffffff; color: #ffffff;
line-height: 22px; line-height: 33px;
height: 144px; height: 144px;
overflow-y: auto; overflow-y: auto;
.item_content_item { .item_content_item {

View File

@ -11,13 +11,12 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
year: {
type: Array,
default: () => [],
},
}); });
const data = reactive({ const data = reactive({
list: [], list: [
{ name: "男", value: 0 },
{ name: "女", value: 0 },
],
year: [], year: [],
option: {}, option: {},
bg: [], bg: [],
@ -98,88 +97,85 @@ const getOption = () => {
radius: ["20%", "50%"], radius: ["20%", "50%"],
center: ["50%", "50%"], center: ["50%", "50%"],
label: { // label: {
// // //
show: true, // show: true,
// // //
position: "outside", // position: "outside",
// // //
// alignTo: "labelLine", // // alignTo: "labelLine",
// // //
backgroundColor: "transparent", // backgroundColor: "transparent",
// // //
height: 0, // height: 0,
// // //
width: 0, // width: 0,
// // //
lineHeight: 0, // lineHeight: 0,
// 线 // // 线
distanceToLabelLine: 0, // distanceToLabelLine: 0,
// // //
borderRadius: 3, // borderRadius: 3,
// // //
borderWidth: 1, // borderWidth: 1,
// // //
borderColor: "auto", // borderColor: "auto",
//
padding: [3, -3, 3, -3],
//
formatter: function (params) {
return `{a|${params.value}%}{a|${params.name}}`;
},
//
rich: {
// a
a: {
//
padding: [10, 0, 30, -60],
//
fontSize: "15px",
//
fontFamily: "MicrosoftYaHei",
//
color: "#fff",
},
// b
// b: {
// // // //
// padding: [0, 10, 55, -70], // padding: [3, -3, 3, -3],
// //
// formatter: function (params) {
// return `{a|${params.value}%}{a|${params.name}}`;
// },
// //
// rich: {
// // a
// a: {
// //
// padding: [10, 0, 30, -60],
// // // //
// fontSize: "15px", // fontSize: "15px",
// // // //
// fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei", // fontFamily: "MicrosoftYaHei",
// //
// fontWeight: "bold",
// // // //
// color: "#fff", // color: "#fff",
// }, // },
}, // // b
}, // // b: {
// label: { // // //
// textStyle: { // // padding: [0, 10, 55, -70],
// color: "white", // // // //
// fontSize: 18, // // // fontSize: "15px",
// // //
// // fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
// // //
// // fontWeight: "bold",
// // //
// // color: "#fff",
// // },
// }, // },
// formatter: "{b}:{c}" + "\n\n",
// borderWidth: 20,
// borderRadius: 4,
// padding: [0, -80],
// }, // },
label: {
textStyle: {
color: "white", //
fontSize: 18, //
},
formatter: "{b}:{c}" + "人\n\n",
borderWidth: 20,
borderRadius: 4,
padding: [0, -80],
},
labelLine: { labelLine: {
show: false, show: false,
normal: { normal: {
length: 40, // 线 length: 40, // 线
length2: 40, length2: 40,
align: 'right', align: "right",
// lineStyle: { // lineStyle: {
// color: "white", // 线 // color: "white", // 线
// }, // },
}, },
}, },
data: [ data: data.list,
{ name: "男", value: 300 },
{ name: "女", value: 200 },
],
}, },
{ {
name: "外边框", name: "外边框",
@ -224,8 +220,8 @@ const setChart = () => {
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list[0].value = props.list.nan;
data.year = props.year; data.list[1].value = props.list.nv;
data.year.forEach(() => { data.year.forEach(() => {
data.bg.push(0); data.bg.push(0);
}); });

View File

@ -602,6 +602,8 @@ const setChart1 = () => {
}; };
onBeforeMount(() => { onBeforeMount(() => {
// data.xxname = props.list.year;
// data.valueList = props.list.data;
setTimeout(() => { setTimeout(() => {
data.xxname.forEach((item, index) => { data.xxname.forEach((item, index) => {
props.list.forEach((itemm, indexx) => { props.list.forEach((itemm, indexx) => {

View File

@ -12,16 +12,16 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
year: { list2: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}); });
const data = reactive({ const data = reactive({
list: [], list: [],
list2: [],
zgffrc: [], // zgffrc: [], //
cxffrc: [], // cxffrc: [], //
year: [],
option: {}, option: {},
bg: [], bg: [],
}); });
@ -65,7 +65,8 @@ const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b}<br />{a1}:{c1} <br />{a}:{c} ", // formatter: "{b}<br />{a1}:{c1} <br />{a}:{c} ",
formatter: "{b}<br />{a}:{c} ",
}, },
legend: { legend: {
data: ["育龄妇女", "婴幼儿"], data: ["育龄妇女", "婴幼儿"],
@ -122,7 +123,7 @@ const getOption = () => {
fontSize: 16, fontSize: 16,
}, },
}, },
data: data1, data: data.list2,
}, },
{ {
type: "category", type: "category",
@ -156,14 +157,14 @@ const getOption = () => {
name: "育龄妇女", name: "育龄妇女",
type: "bar", type: "bar",
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/, barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
data: data.zgffrc, data: data.list ,
barWidth: "18%", barWidth: "18%",
label: { label: {
show: true, show: true,
color: "#ffffff", color: "#ffffff",
position: "right", position: "right",
formatter: function (data) { formatter: function (data) {
return data.value + "万"; return data.value ;
}, },
}, },
itemStyle: { itemStyle: {
@ -180,35 +181,36 @@ const getOption = () => {
}, },
}, },
}, },
{ // {
z: 2, // z: 2,
name: "婴幼儿", // name: "",
type: "bar", // type: "bar",
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/, // barGap: 0.3 /**/,
data: data.cxffrc, // data: data.cxffrc,
barWidth: "18%", // barWidth: "18%",
label: { // label: {
show: true, // show: true,
color: "#ffffff", // color: "#ffffff",
position: "right", // position: "right",
formatter: function (data) { // formatter: function (data) {
return data.value + "万"; // return data.value + "";
}, // },
}, // },
itemStyle: { // itemStyle: {
color: { // color: {
type: "linear", // type: "linear",
x: 0, // x: 0,
x2: 1, // x2: 1,
y: 0, // y: 0,
y2: 0, // y2: 0,
colorStops: [ // colorStops: [
{ offset: 0, color: "rgba(24, 234, 254, 0.2)" }, // { offset: 0, color: "rgba(24, 234, 254, 0.2)" },
{ offset: 1, color: "rgba(24, 234, 254, 0.7)" }, // { offset: 1, color: "rgba(24, 234, 254, 0.7)" },
], // ],
}, // },
}, // },
}, // },
// { // {
// type: "bar", // type: "bar",
// xAxisIndex: 1, // xAxisIndex: 1,
@ -234,13 +236,16 @@ const setChart = () => {
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
data.year = props.year; data.list2 = props.list2;
data.list.forEach((item) => { // data.year = props.year;
data.zgffrc.push((item.zgffrc / 10000).toFixed(0)); console.log(1111,data.list, data.list2);
data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
data.bg.push(""); // data.list.forEach((item) => {
}); // data.zgffrc.push((item.zgffrc / 10000).toFixed(0));
console.log(data.zgffrc,data.cxffrc); // data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
// data.bg.push("");
// });
console.log(data.zgffrc, data.cxffrc);
getOption(); getOption();
setChart(); setChart();
}, 600); }, 600);

View File

@ -33,10 +33,10 @@
<div class="pagePart"> <div class="pagePart">
<el-pagination <el-pagination
size="small" size="small"
:pager-count="5" :pager-count="3"
class="mt-4" class="mt-4"
background background
layout="prev, pager, next" layout="prev, pager, next,total"
:page-size="data.pagination.pageSize" :page-size="data.pagination.pageSize"
:total="data.pagination.total" :total="data.pagination.total"
:current-page="data.pagination.current" :current-page="data.pagination.current"
@ -120,8 +120,8 @@
size="small" size="small"
class="mt-4" class="mt-4"
background background
layout="prev, pager, next" layout="prev, pager, next ,total"
:pager-count="5" :pager-count="3"
:page-size="data.pagination1.pageSize" :page-size="data.pagination1.pageSize"
:total="data.pagination1.total" :total="data.pagination1.total"
:current-page="data.pagination1.current" :current-page="data.pagination1.current"
@ -178,7 +178,8 @@
size="small" size="small"
class="mt-4" class="mt-4"
background background
layout="prev, pager, next" layout="prev, pager, next ,total"
:pager-count="3"
:page-size="data.pagination.pageSize" :page-size="data.pagination.pageSize"
:total="data.pagination.total" :total="data.pagination.total"
:current-page="data.pagination.current" :current-page="data.pagination.current"

View File

@ -306,7 +306,7 @@ const data = reactive({
{ {
label: "年龄", label: "年龄",
property: "nl", property: "nl",
width: "60", width: "80",
}, },
{ {
label: "人口标签", label: "人口标签",
@ -359,7 +359,7 @@ const data = reactive({
{ {
label: "年龄", label: "年龄",
property: "nl", property: "nl",
width: "60", width: "80",
}, },
{ {
label: "人口标签", label: "人口标签",
@ -720,7 +720,7 @@ const tableHeaderColor = (arg) => {
return { return {
// paddingLeft: "10px", // paddingLeft: "10px",
letterSpacing: "1px", letterSpacing: "1px",
fontSize: "16px", fontSize: "20px",
height: "79px", height: "79px",
backgroundColor: "rgba(23, 62, 115)", backgroundColor: "rgba(23, 62, 115)",
color: "#fff", color: "#fff",
@ -734,7 +734,7 @@ const rowState = (row) => {
if (row.rowIndex % 2 == 0) { if (row.rowIndex % 2 == 0) {
return { return {
letterSpacing: "1px", letterSpacing: "1px",
fontSize: "14px", fontSize: "19px",
height: "36px", height: "36px",
backgroundColor: "rgba(31, 63, 113, 1)", backgroundColor: "rgba(31, 63, 113, 1)",
color: "#fff", color: "#fff",
@ -742,7 +742,7 @@ const rowState = (row) => {
} else if (row.rowIndex % 2 !== 0) { } else if (row.rowIndex % 2 !== 0) {
return { return {
letterSpacing: "1px", letterSpacing: "1px",
fontSize: "14px", fontSize: "19px",
height: "36px", height: "36px",
backgroundColor: "rgba(43, 74, 121, 1)", backgroundColor: "rgba(43, 74, 121, 1)",
color: "#fff", color: "#fff",
@ -941,6 +941,7 @@ onMounted(() => {
top: 0; top: 0;
width: 100%; width: 100%;
height: 79px; height: 79px;
font-size: 20px;
// background: linear-gradient( // background: linear-gradient(
// 270deg, // 270deg,
// rgba(0, 52, 131, 0.20) 0%, // rgba(0, 52, 131, 0.20) 0%,
@ -963,6 +964,9 @@ onMounted(() => {
--el-table-header-text-color: none; --el-table-header-text-color: none;
// border: 1px solid #7aceff; // border: 1px solid #7aceff;
} }
:deep(.el-table .cell) {
line-height: 30px;
}
// .table { // .table {
// :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) { // :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
// border: none !important; // border: none !important;
@ -1027,7 +1031,7 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
span { span {
font-size: 23px; font-size: 28px;
font-weight: 500; font-weight: 500;
font-family: titleNore; font-family: titleNore;
margin-left: 20px; margin-left: 20px;

View File

@ -8,11 +8,7 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<eP1 <eP1 :list="data.csrs.data" :year="data.csrs.year"></eP1>
:list="data.lmb.tnbrs"
:list2="data.lmb.gxyrs"
:year="data.lmb.year"
></eP1>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title left_1"> <div class="yd_title left_1">
@ -21,10 +17,7 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<eP2 <eP2 :list="data.yynbl"></eP2>
:list="data.medicalInsurance.ffrc"
:year="data.medicalInsurance.year"
></eP2>
</div> </div>
</div> </div>
<div class="displayFlex center_bg"> <div class="displayFlex center_bg">
@ -45,7 +38,9 @@
src="@/assets/images/hygiene/jt.png" src="@/assets/images/hygiene/jt.png"
class="right5_center" class="right5_center"
/> />
<div class="right5_bottom">{{ data.mz.mjzrc }} <span></span> </div> <div class="right5_bottom">
{{ data.jbgk.ylfnrs }} <span></span>
</div>
</div> </div>
</div> </div>
<div class="item5"> <div class="item5">
@ -56,7 +51,9 @@
src="@/assets/images/hygiene/jt.png" src="@/assets/images/hygiene/jt.png"
class="right5_center" class="right5_center"
/> />
<div class="right5_bottom">{{ data.mz.zyrs }}<span></span></div> <div class="right5_bottom">
{{ data.jbgk.yyers }} <span></span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -70,7 +67,9 @@
src="@/assets/images/hygiene/jt.png" src="@/assets/images/hygiene/jt.png"
class="right5_center" class="right5_center"
/> />
<div class="right5_bottom">{{ data.mz.zyrs }}<span></span></div> <div class="right5_bottom">
{{ data.jbgk.bzhmys }} <span> </span>
</div>
</div> </div>
</div> </div>
<div class="item5"> <div class="item5">
@ -81,7 +80,9 @@
src="@/assets/images/hygiene/jt.png" src="@/assets/images/hygiene/jt.png"
class="right5_center" class="right5_center"
/> />
<div class="right5_bottom">{{ data.mz.zyrs }}<span></span></div> <div class="right5_bottom">
{{ data.jbgk.wxjmys }} <span> </span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -95,7 +96,7 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<eP3 :list="data.jsbgl" v-if="showEchart"></eP3> <eP3 :list="data.ylfnzb"></eP3>
</div> </div>
</div> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
@ -107,8 +108,8 @@
</div> </div>
</div> </div>
<eP4 <eP4
:list="data.medicalInsurance.ffrc" :list="data.ylfnyyefb.ylfnrs"
:year="data.medicalInsurance.year" :list2="data.ylfnyyefb.xzjd"
></eP4> ></eP4>
</div> </div>
</div> </div>
@ -117,13 +118,21 @@
<script setup> <script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue"; import { ref, reactive, onMounted, onBeforeMount } from "vue";
import http from "@/utils/request.js";
import eP1 from "../echarts_infabt/eP1.vue"; import eP1 from "../echarts_infabt/eP1.vue";
import eP2 from "../echarts_infabt/eP2.vue"; import eP2 from "../echarts_infabt/eP2.vue";
import eP3 from "../echarts_infabt/eP3.vue"; import eP3 from "../echarts_infabt/eP3.vue";
import eP4 from "../echarts_infabt/eP4.vue"; import eP4 from "../echarts_infabt/eP4.vue";
import http from "@/utils/request.js";
const data = reactive({ const data = reactive({
csrs: {}, //
yynbl: {}, //
jbgk: {}, //
ylfnzb: {}, //
ylfnyyefb: {}, //
medicalInsurance: {}, // medicalInsurance: {}, //
lmb: {}, // lmb: {}, //
mfyyqk: [ mfyyqk: [
@ -147,18 +156,26 @@ const data = reactive({
const showEchart = ref(false); const showEchart = ref(false);
const getData = async () => { const getData = async () => {
await http.get("/api/ggfwyth/health").then((res) => { await http.get("/api/ggfwyth/yysyOverview").then((res) => {
if (res.code == 200) { if (res.code == 200) {
data.medicalInsurance = res.data.medicalInsurance; console.log(res.data);
data.lmb = res.data.lmb; data.csrs = res.data.csrs;
data.mz = res.data.mz; data.yynbl = res.data.yynbl;
data.jkda = res.data.jkda;
data.jsbgl = res.data.jsbgl; data.jbgk = res.data.jbgk;
data.ylfnzb = res.data.ylfnzb.data;
data.ylfnyyefb = res.data.ylfnyyefb;
// data.medicalInsurance = res.data.medicalInsurance;
// data.lmb = res.data.lmb;
// data.mz = res.data.mz;
// data.jkda = res.data.jkda;
// data.jsbgl = res.data.jsbgl;
// 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;
// data.lxbx = res.data.lxbx; // data.lxbx = res.data.lxbx;
showEchart.value = true; // showEchart.value = true;
} }
}); });
}; };
@ -569,7 +586,7 @@ onMounted(() => {});
rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%,
#3976a1 100% #3976a1 100%
); );
span{ span {
font-size: 15px; font-size: 15px;
} }
} }

View File

@ -15,8 +15,8 @@ export default defineConfig({
// 第一个代理 // 第一个代理
"/api": { "/api": {
// 匹配到啥来进行方向代理 // 匹配到啥来进行方向代理
// target: "http://10.0.0.7:8095/", //刘进 target: "http://10.0.0.7:8095/", //刘进
target: "https://jzzf.longyou.gov.cn:998/", //线上 // target: "https://jzzf.longyou.gov.cn:998/", //线上
// target: "http://220.191.238.50:996/", //线上 // target: "http://220.191.238.50:996/", //线上
// target: "https://zzdyyfb.dsjj.qz.gov.cn/web/mgop/gov-open/zj/2002428903/reserved/", //线上 // target: "https://zzdyyfb.dsjj.qz.gov.cn/web/mgop/gov-open/zj/2002428903/reserved/", //线上
changeOrigin: true, //是否支持跨域 changeOrigin: true, //是否支持跨域