This commit is contained in:
duanxiaohai
parent
c87e0fe49a
commit
6d4ec2d795
|
|
@ -67,6 +67,7 @@
|
|||
height="390px"
|
||||
max-height="390"
|
||||
:header-cell-style="{ background: 'rgba(0, 143, 205, 0.63)' }"
|
||||
:row-style="rowState"
|
||||
@row-click="handleRowClick"
|
||||
stripe
|
||||
>
|
||||
|
|
@ -185,7 +186,16 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
const emit = defineEmits(["close", "handle", "showList"]);
|
||||
|
||||
const rowState = (row) => {
|
||||
return {
|
||||
fontSize: "22px",
|
||||
lineHeight: "33px",
|
||||
// letterSpacing: "1px",
|
||||
// height: "36px",
|
||||
// backgroundColor: "rgba(43, 74, 121, 1)",
|
||||
// color: "#fff",
|
||||
};
|
||||
};
|
||||
const handleRowClick = (row, column, event) => {
|
||||
emit("showList", row);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -291,10 +291,11 @@ const handle = (current) => {
|
|||
padding: 20px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
// font-size: 16px;
|
||||
font-size: 22px;
|
||||
letter-spacing: 3px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
line-height: 33px;
|
||||
height: 144px;
|
||||
overflow-y: auto;
|
||||
.item_content_item {
|
||||
|
|
|
|||
|
|
@ -11,13 +11,12 @@ const props = defineProps({
|
|||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list: [
|
||||
{ name: "男", value: 0 },
|
||||
{ name: "女", value: 0 },
|
||||
],
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
|
|
@ -98,88 +97,85 @@ const getOption = () => {
|
|||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
|
||||
label: {
|
||||
// 显示标签
|
||||
show: true,
|
||||
// 标签位置
|
||||
position: "outside",
|
||||
// 标签对齐方式
|
||||
// alignTo: "labelLine",
|
||||
// 背景颜色
|
||||
backgroundColor: "transparent",
|
||||
// 高度
|
||||
height: 0,
|
||||
// 宽度
|
||||
width: 0,
|
||||
// 行高
|
||||
lineHeight: 0,
|
||||
// 标签距离标签线的距离
|
||||
distanceToLabelLine: 0,
|
||||
// 边框圆角
|
||||
borderRadius: 3,
|
||||
// 边框宽度
|
||||
borderWidth: 1,
|
||||
// 边框颜色
|
||||
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: {
|
||||
// label: {
|
||||
// // 显示标签
|
||||
// show: true,
|
||||
// // 标签位置
|
||||
// position: "outside",
|
||||
// // 标签对齐方式
|
||||
// // alignTo: "labelLine",
|
||||
// // 背景颜色
|
||||
// backgroundColor: "transparent",
|
||||
// // 高度
|
||||
// height: 0,
|
||||
// // 宽度
|
||||
// width: 0,
|
||||
// // 行高
|
||||
// lineHeight: 0,
|
||||
// // 标签距离标签线的距离
|
||||
// distanceToLabelLine: 0,
|
||||
// // 边框圆角
|
||||
// borderRadius: 3,
|
||||
// // 边框宽度
|
||||
// borderWidth: 1,
|
||||
// // 边框颜色
|
||||
// borderColor: "auto",
|
||||
// // 内边距
|
||||
// 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",
|
||||
// // 字体
|
||||
// fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
|
||||
// // 字体粗细
|
||||
// fontWeight: "bold",
|
||||
// fontFamily: "MicrosoftYaHei",
|
||||
// // 字体颜色
|
||||
// color: "#fff",
|
||||
// },
|
||||
},
|
||||
},
|
||||
// label: {
|
||||
// textStyle: {
|
||||
// color: "white", // 改变标示文字的颜色
|
||||
// fontSize: 18, //文字大小
|
||||
// // b样式
|
||||
// // b: {
|
||||
// // // 内边距
|
||||
// // padding: [0, 10, 55, -70],
|
||||
// // // 字体大小
|
||||
// // 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: {
|
||||
show: false,
|
||||
normal: {
|
||||
length: 40, // 改变标示线的长度
|
||||
length2: 40,
|
||||
align: 'right',
|
||||
align: "right",
|
||||
// lineStyle: {
|
||||
// color: "white", // 改变标示线的颜色
|
||||
// },
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ name: "男", value: 300 },
|
||||
{ name: "女", value: 200 },
|
||||
],
|
||||
data: data.list,
|
||||
},
|
||||
{
|
||||
name: "外边框",
|
||||
|
|
@ -224,8 +220,8 @@ const setChart = () => {
|
|||
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.year = props.year;
|
||||
data.list[0].value = props.list.nan;
|
||||
data.list[1].value = props.list.nv;
|
||||
data.year.forEach(() => {
|
||||
data.bg.push(0);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -602,6 +602,8 @@ const setChart1 = () => {
|
|||
};
|
||||
|
||||
onBeforeMount(() => {
|
||||
// data.xxname = props.list.year;
|
||||
// data.valueList = props.list.data;
|
||||
setTimeout(() => {
|
||||
data.xxname.forEach((item, index) => {
|
||||
props.list.forEach((itemm, indexx) => {
|
||||
|
|
|
|||
|
|
@ -12,16 +12,16 @@ const props = defineProps({
|
|||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
year: {
|
||||
list2: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
list2: [],
|
||||
zgffrc: [], //育龄妇女
|
||||
cxffrc: [], //婴幼儿
|
||||
year: [],
|
||||
option: {},
|
||||
bg: [],
|
||||
});
|
||||
|
|
@ -65,7 +65,8 @@ const getOption = () => {
|
|||
data.option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
formatter: "{b}<br />{a1}:{c1} <br />{a}:{c} ",
|
||||
// formatter: "{b}<br />{a1}:{c1} <br />{a}:{c} ",
|
||||
formatter: "{b}<br />{a}:{c} ",
|
||||
},
|
||||
legend: {
|
||||
data: ["育龄妇女", "婴幼儿"],
|
||||
|
|
@ -122,7 +123,7 @@ const getOption = () => {
|
|||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
data: data1,
|
||||
data: data.list2,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
|
|
@ -156,14 +157,14 @@ const getOption = () => {
|
|||
name: "育龄妇女",
|
||||
type: "bar",
|
||||
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||
data: data.zgffrc,
|
||||
data: data.list ,
|
||||
barWidth: "18%",
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "right",
|
||||
formatter: function (data) {
|
||||
return data.value + "万";
|
||||
return data.value ;
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
|
|
@ -180,35 +181,36 @@ const getOption = () => {
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
z: 2,
|
||||
name: "婴幼儿",
|
||||
type: "bar",
|
||||
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||
data: data.cxffrc,
|
||||
barWidth: "18%",
|
||||
label: {
|
||||
show: true,
|
||||
color: "#ffffff",
|
||||
position: "right",
|
||||
formatter: function (data) {
|
||||
return data.value + "万";
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: "rgba(24, 234, 254, 0.2)" },
|
||||
{ offset: 1, color: "rgba(24, 234, 254, 0.7)" },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// z: 2,
|
||||
// name: "婴幼儿",
|
||||
// type: "bar",
|
||||
// barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||
// data: data.cxffrc,
|
||||
// barWidth: "18%",
|
||||
// label: {
|
||||
// show: true,
|
||||
// color: "#ffffff",
|
||||
// position: "right",
|
||||
// formatter: function (data) {
|
||||
// return data.value + "万";
|
||||
// },
|
||||
// },
|
||||
// itemStyle: {
|
||||
// color: {
|
||||
// type: "linear",
|
||||
// x: 0,
|
||||
// x2: 1,
|
||||
// y: 0,
|
||||
// y2: 0,
|
||||
// colorStops: [
|
||||
// { offset: 0, color: "rgba(24, 234, 254, 0.2)" },
|
||||
// { offset: 1, color: "rgba(24, 234, 254, 0.7)" },
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// {
|
||||
// type: "bar",
|
||||
// xAxisIndex: 1,
|
||||
|
|
@ -234,13 +236,16 @@ const setChart = () => {
|
|||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
data.year = props.year;
|
||||
data.list.forEach((item) => {
|
||||
data.zgffrc.push((item.zgffrc / 10000).toFixed(0));
|
||||
data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
|
||||
data.bg.push("");
|
||||
});
|
||||
console.log(data.zgffrc,data.cxffrc);
|
||||
data.list2 = props.list2;
|
||||
// data.year = props.year;
|
||||
console.log(1111,data.list, data.list2);
|
||||
|
||||
// data.list.forEach((item) => {
|
||||
// data.zgffrc.push((item.zgffrc / 10000).toFixed(0));
|
||||
// data.cxffrc.push((item.cxffrc / 10000).toFixed(0));
|
||||
// data.bg.push("");
|
||||
// });
|
||||
console.log(data.zgffrc, data.cxffrc);
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
:pager-count="5"
|
||||
class="mt-4"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
layout="total,prev, pager, next"
|
||||
:page-size="data.pagination.pageSize"
|
||||
:total="data.pagination.total"
|
||||
:current-page="data.pagination.current"
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
size="small"
|
||||
class="mt-4"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
layout="total,prev, pager, next"
|
||||
:pager-count="5"
|
||||
:page-size="data.pagination1.pageSize"
|
||||
:total="data.pagination1.total"
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
size="small"
|
||||
class="mt-4"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
layout="total,prev, pager, next"
|
||||
:page-size="data.pagination.pageSize"
|
||||
:total="data.pagination.total"
|
||||
:current-page="data.pagination.current"
|
||||
|
|
|
|||
|
|
@ -734,7 +734,7 @@ const rowState = (row) => {
|
|||
if (row.rowIndex % 2 == 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
fontSize: "22px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(31, 63, 113, 1)",
|
||||
color: "#fff",
|
||||
|
|
@ -742,7 +742,7 @@ const rowState = (row) => {
|
|||
} else if (row.rowIndex % 2 !== 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
fontSize: "22px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(43, 74, 121, 1)",
|
||||
color: "#fff",
|
||||
|
|
@ -963,6 +963,9 @@ onMounted(() => {
|
|||
--el-table-header-text-color: none;
|
||||
// border: 1px solid #7aceff;
|
||||
}
|
||||
:deep(.el-table .cell) {
|
||||
line-height: 30px;
|
||||
}
|
||||
// .table {
|
||||
// :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
|
||||
// border: none !important;
|
||||
|
|
|
|||
|
|
@ -8,11 +8,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<eP1
|
||||
:list="data.lmb.tnbrs"
|
||||
:list2="data.lmb.gxyrs"
|
||||
:year="data.lmb.year"
|
||||
></eP1>
|
||||
<eP1 :list="data.csrs.data" :year="data.csrs.year"></eP1>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_1">
|
||||
|
|
@ -21,10 +17,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<eP2
|
||||
:list="data.medicalInsurance.ffrc"
|
||||
:year="data.medicalInsurance.year"
|
||||
></eP2>
|
||||
<eP2 :list="data.yynbl"></eP2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
|
|
@ -45,7 +38,9 @@
|
|||
src="@/assets/images/hygiene/jt.png"
|
||||
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 class="item5">
|
||||
|
|
@ -56,7 +51,9 @@
|
|||
src="@/assets/images/hygiene/jt.png"
|
||||
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>
|
||||
|
|
@ -70,7 +67,9 @@
|
|||
src="@/assets/images/hygiene/jt.png"
|
||||
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 class="item5">
|
||||
|
|
@ -81,7 +80,9 @@
|
|||
src="@/assets/images/hygiene/jt.png"
|
||||
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>
|
||||
|
|
@ -95,7 +96,7 @@
|
|||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<eP3 :list="data.jsbgl" v-if="showEchart"></eP3>
|
||||
<eP3 :list="data.ylfnzb"></eP3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
|
|
@ -107,8 +108,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<eP4
|
||||
:list="data.medicalInsurance.ffrc"
|
||||
:year="data.medicalInsurance.year"
|
||||
:list="data.ylfnyyefb.ylfnrs"
|
||||
:list2="data.ylfnyyefb.xzjd"
|
||||
></eP4>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,13 +118,21 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeMount } from "vue";
|
||||
import http from "@/utils/request.js";
|
||||
import eP1 from "../echarts_infabt/eP1.vue";
|
||||
import eP2 from "../echarts_infabt/eP2.vue";
|
||||
import eP3 from "../echarts_infabt/eP3.vue";
|
||||
import eP4 from "../echarts_infabt/eP4.vue";
|
||||
import http from "@/utils/request.js";
|
||||
|
||||
const data = reactive({
|
||||
csrs: {}, //出生人数
|
||||
yynbl: {}, // 婴幼儿比例
|
||||
jbgk: {}, // 基本信息
|
||||
ylfnzb: {}, // 育龄妇女占比
|
||||
ylfnyyefb: {}, // 育龄妇女婴幼儿分布
|
||||
|
||||
|
||||
|
||||
medicalInsurance: {}, //医疗保险
|
||||
lmb: {}, //两慢病
|
||||
mfyyqk: [
|
||||
|
|
@ -147,18 +156,26 @@ const data = reactive({
|
|||
const showEchart = ref(false);
|
||||
|
||||
const getData = async () => {
|
||||
await http.get("/api/ggfwyth/health").then((res) => {
|
||||
await http.get("/api/ggfwyth/yysyOverview").then((res) => {
|
||||
if (res.code == 200) {
|
||||
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;
|
||||
console.log(res.data);
|
||||
data.csrs = res.data.csrs;
|
||||
data.yynbl = res.data.yynbl;
|
||||
|
||||
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.jktj = res.data.jktj;
|
||||
// data.jkhd = res.data.jkhd;
|
||||
// data.lxbx = res.data.lxbx;
|
||||
showEchart.value = true;
|
||||
// showEchart.value = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -569,7 +586,7 @@ onMounted(() => {});
|
|||
rgba(255, 255, 255, 0) 0%,
|
||||
#3976a1 100%
|
||||
);
|
||||
span{
|
||||
span {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ export default defineConfig({
|
|||
// 第一个代理
|
||||
"/api": {
|
||||
// 匹配到啥来进行方向代理
|
||||
// target: "http://10.0.0.7:8095/", //刘进
|
||||
target: "https://jzzf.longyou.gov.cn:998/", //线上
|
||||
target: "http://10.0.0.7:8095/", //刘进
|
||||
// target: "https://jzzf.longyou.gov.cn:998/", //线上
|
||||
// target: "http://220.191.238.50:996/", //线上
|
||||
// target: "https://zzdyyfb.dsjj.qz.gov.cn/web/mgop/gov-open/zj/2002428903/reserved/", //线上
|
||||
changeOrigin: true, //是否支持跨域
|
||||
|
|
|
|||
Loading…
Reference in New Issue