Merge branch 'main' of https://git.cityme.com.cn/xiangshan/ggfwjsc

build/build/assets/401-7bb5d6ce.js

@@ -1 +1 @@
-import{_ as i}from"./error3-2af3a855.js";import{_ as s,e as _,f as t,q as e}from"./index-306f53b4.js";const d={},c={class:"error_main"},o=e('<img class="error_main_img" src="'+i+'" alt=""><div class="error_main_content">请求未验证，请联系管理员</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),r=[o];function n(a,v){return _(),t("div",c,r)}const f=s(d,[["render",n]]);export{f as default};
+import{_ as i}from"./error3-2af3a855.js";import{_ as s,e as _,f as t,q as e}from"./index-c3050129.js";const d={},c={class:"error_main"},o=e('<img class="error_main_img" src="'+i+'" alt=""><div class="error_main_content">请求未验证，请联系管理员</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),r=[o];function n(a,v){return _(),t("div",c,r)}const f=s(d,[["render",n]]);export{f as default};

build/build/assets/403-a6c695d9.js

@@ -1 +1 @@
-import{_ as i}from"./error3-2af3a855.js";import{_ as s,e as _,f as t,q as e}from"./index-306f53b4.js";const d={},c={class:"error_main"},o=e('<img class="error_main_img" src="'+i+'" alt=""><div class="error_main_content"> 抱歉，您暂无当前页面的访问权限，请联系管理员 </div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),r=[o];function n(a,v){return _(),t("div",c,r)}const f=s(d,[["render",n]]);export{f as default};
+import{_ as i}from"./error3-2af3a855.js";import{_ as s,e as _,f as t,q as e}from"./index-c3050129.js";const d={},c={class:"error_main"},o=e('<img class="error_main_img" src="'+i+'" alt=""><div class="error_main_content"> 抱歉，您暂无当前页面的访问权限，请联系管理员 </div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),r=[o];function n(a,v){return _(),t("div",c,r)}const f=s(d,[["render",n]]);export{f as default};

build/build/assets/404-84917127.js

@@ -1 +1 @@
-import{_ as i,e,f as s,q as t}from"./index-306f53b4.js";const _=""+new URL("error1-70b8ad8e.png",import.meta.url).href;const d={},r={class:"error_main"},c=t('<img class="error_main_img" src="'+_+'" alt=""><div class="error_main_content">抱歉，系统错误，您可以选择尝试清除缓存或联系管理员</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),n=[c];function o(a,v){return e(),s("div",r,n)}const m=i(d,[["render",o]]);export{m as default};
+import{_ as i,e,f as s,q as t}from"./index-c3050129.js";const _=""+new URL("error1-70b8ad8e.png",import.meta.url).href;const d={},r={class:"error_main"},c=t('<img class="error_main_img" src="'+_+'" alt=""><div class="error_main_content">抱歉，系统错误，您可以选择尝试清除缓存或联系管理员</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),n=[c];function o(a,v){return e(),s("div",r,n)}const m=i(d,[["render",o]]);export{m as default};

build/build/assets/500-fa0c0de1.js

@@ -1 +1 @@
-import{_ as i,e,f as s,q as t}from"./index-306f53b4.js";const _=""+new URL("error2-91a8e6e9.png",import.meta.url).href;const d={},r={class:"error_main"},c=t('<img class="error_main_img" src="'+_+'" alt=""><div class="error_main_content"> 抱歉，系统错误，您可以选择尝试清除缓存或联系管理员 </div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),n=[c];function o(a,v){return e(),s("div",r,n)}const m=i(d,[["render",o]]);export{m as default};
+import{_ as i,e,f as s,q as t}from"./index-c3050129.js";const _=""+new URL("error2-91a8e6e9.png",import.meta.url).href;const d={},r={class:"error_main"},c=t('<img class="error_main_img" src="'+_+'" alt=""><div class="error_main_content"> 抱歉，系统错误，您可以选择尝试清除缓存或联系管理员 </div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),n=[c];function o(a,v){return e(),s("div",r,n)}const m=i(d,[["render",o]]);export{m as default};

build/build/assets/___vite-browser-external_commonjs-proxy-d8f321f4.js

@@ -1 +1 @@
-import{P as o}from"./index-306f53b4.js";function n(){return n=Object.assign?Object.assign.bind():function(a){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(a[r]=t[r])}return a},n.apply(null,arguments)}const _=Object.freeze(Object.defineProperty({__proto__:null,get default(){return n}},Symbol.toStringTag,{value:"Module"})),s={},l=Object.freeze(Object.defineProperty({__proto__:null,default:s},Symbol.toStringTag,{value:"Module"})),c=o(l);export{n as _,_ as a,c as r};
+import{P as o}from"./index-c3050129.js";function n(){return n=Object.assign?Object.assign.bind():function(a){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(a[r]=t[r])}return a},n.apply(null,arguments)}const _=Object.freeze(Object.defineProperty({__proto__:null,get default(){return n}},Symbol.toStringTag,{value:"Module"})),s={},l=Object.freeze(Object.defineProperty({__proto__:null,default:s},Symbol.toStringTag,{value:"Module"})),c=o(l);export{n as _,_ as a,c as r};

build/build/assets/dialog-dafb5ae2.js

@@ -1 +1 @@
-import{_ as q,a as z,b as I}from"./table_c-9de598ee.js";import{_ as M,u as j,a as N,r as v,d as R,y as w,b as A,z as i,e as n,f as d,A as p,D as u,g as l,x as F,E,l as D,v as _,F as k,h as U,G as X,p as G,m as K}from"./index-306f53b4.js";/* empty css                                                               */const h=t=>(G("data-v-68919937"),t=t(),K(),t),L={class:"dialogPage"},O={class:"my-header"},T={class:"tabelPart"},$={class:"bo"},H={class:"title"},J={class:"title_top"},Q=h(()=>l("img",{src:q,alt:"",style:{"margin-right":"10px"}},null,-1)),W={key:0,class:"name"},Y={key:1,class:"name"},Z=h(()=>l("img",{src:z,alt:"",style:{"margin-left":"10px"}},null,-1)),ee=h(()=>l("img",{class:"title_botton",src:I,alt:""},null,-1)),te={style:{width:"100%",height:"calc(100% - 110px)"}},ae={class:"pagePart"},le={__name:"dialog",props:{dialogShow:{type:Boolean,default:()=>!1},columns:{type:Array,default:()=>[]},tableData:{type:Array,default:()=>[]},title:{type:String,default:()=>""},pagination:{type:Object,required:!0},showXq:{type:Boolean,default:()=>!0},dj:{type:Boolean,default:()=>!1}},emits:["close","handle","loadTables","openMessage"],setup(t,{emit:g}){const a=t;j(),N();const x=(o,r,f)=>{a.dj&&(console.log(o,a.dj,"rwxq"),g("openMessage",{identNo:o.identNo}))},c=v(),s=R({title:"",columns:[],tableData:[],pagination:{}}),m=v(Math.random());w(()=>a.dialogShow,(o,r)=>{c.value=o,s.columns=a.columns}),w(()=>a.tableData,(o,r)=>{s.tableData=a.tableData,m.value=Math.random()}),A(()=>{c.value=a.dialogShow,s.columns=a.columns,s.title=a.title,s.tableData=a.tableData,document.querySelector(".el-pagination__total")});const S=()=>{c.value=!1,g("close")},C=o=>{g("handle",o)};return(o,r)=>{const f=i("el-icon"),y=i("el-table-column"),V=i("el-table"),B=i("el-pagination"),P=i("el-dialog");return n(),d("div",L,[p(P,{modelValue:c.value,"onUpdate:modelValue":r[1]||(r[1]=e=>c.value=e),width:"80vw","show-close":!1,center:"","close-on-click-modal":!1,"close-on-press-escape":!1},{header:u(({close:e,titleId:b,titleClass:oe})=>[l("div",O,[p(f,{size:"26",color:"#fff",onClick:S},{default:u(()=>[p(F(E))]),_:1})])]),default:u(()=>[l("div",T,[l("div",$,[l("div",H,[l("div",J,[Q,t.showXq?(n(),d("div",W,D(t.title)+"详情",1)):(n(),d("div",Y,D(t.title),1)),Z]),ee])]),l("div",te,[(n(),_(V,{data:s.tableData,height:"100%",key:m.value,"header-cell-style":{background:"#008FCD"},onRowClick:x},{default:u(()=>[(n(!0),d(k,null,U(s.columns,e=>(n(),d(k,null,[e.type==="slot"?(n(),_(y,{key:e.label,"show-overflow-tooltip":!0,label:e.label,property:e.property,align:e.align||"center"},{default:u(b=>[X(o.$slots,e.property,{currentCol:e,currentData:b.row},void 0,!0)]),_:2},1032,["label","property","align"])):(n(),_(y,{key:1,property:e.property,label:e.label,"show-overflow-tooltip":!0,align:e.align||"center"},null,8,["property","label","align"]))],64))),256))]),_:3},8,["data"]))]),l("div",ae,[p(B,{background:"",layout:"prev, pager, next,total","page-size":t.pagination.pageSize,total:t.pagination.total,"prev-text":"上一页","next-text":"下一页",onCurrentChange:C,"current-page":t.pagination.currentPage,"onUpdate:currentPage":r[0]||(r[0]=e=>t.pagination.currentPage=e)},null,8,["page-size","total","current-page"])])])]),_:3},8,["modelValue"])])}}},ce=M(le,[["__scopeId","data-v-68919937"]]);export{ce as D};
+import{_ as q,a as z,b as I}from"./table_c-9de598ee.js";import{_ as M,u as j,a as N,r as v,d as R,B as w,b as A,s as i,e as n,f as d,v as p,x as u,g as l,A as F,E,l as k,z as _,F as D,h as U,G as X,p as G,m as K}from"./index-c3050129.js";/* empty css                                                               */const h=t=>(G("data-v-68919937"),t=t(),K(),t),L={class:"dialogPage"},O={class:"my-header"},T={class:"tabelPart"},$={class:"bo"},H={class:"title"},J={class:"title_top"},Q=h(()=>l("img",{src:q,alt:"",style:{"margin-right":"10px"}},null,-1)),W={key:0,class:"name"},Y={key:1,class:"name"},Z=h(()=>l("img",{src:z,alt:"",style:{"margin-left":"10px"}},null,-1)),ee=h(()=>l("img",{class:"title_botton",src:I,alt:""},null,-1)),te={style:{width:"100%",height:"calc(100% - 110px)"}},ae={class:"pagePart"},le={__name:"dialog",props:{dialogShow:{type:Boolean,default:()=>!1},columns:{type:Array,default:()=>[]},tableData:{type:Array,default:()=>[]},title:{type:String,default:()=>""},pagination:{type:Object,required:!0},showXq:{type:Boolean,default:()=>!0},dj:{type:Boolean,default:()=>!1}},emits:["close","handle","loadTables","openMessage"],setup(t,{emit:g}){const a=t;j(),N();const x=(o,r,f)=>{a.dj&&(console.log(o,a.dj,"rwxq"),g("openMessage",{identNo:o.identNo}))},c=v(),s=R({title:"",columns:[],tableData:[],pagination:{}}),m=v(Math.random());w(()=>a.dialogShow,(o,r)=>{c.value=o,s.columns=a.columns}),w(()=>a.tableData,(o,r)=>{s.tableData=a.tableData,m.value=Math.random()}),A(()=>{c.value=a.dialogShow,s.columns=a.columns,s.title=a.title,s.tableData=a.tableData,document.querySelector(".el-pagination__total")});const S=()=>{c.value=!1,g("close")},C=o=>{g("handle",o)};return(o,r)=>{const f=i("el-icon"),y=i("el-table-column"),B=i("el-table"),V=i("el-pagination"),P=i("el-dialog");return n(),d("div",L,[p(P,{modelValue:c.value,"onUpdate:modelValue":r[1]||(r[1]=e=>c.value=e),width:"80vw","show-close":!1,center:"","close-on-click-modal":!1,"close-on-press-escape":!1},{header:u(({close:e,titleId:b,titleClass:oe})=>[l("div",O,[p(f,{size:"26",color:"#fff",onClick:S},{default:u(()=>[p(F(E))]),_:1})])]),default:u(()=>[l("div",T,[l("div",$,[l("div",H,[l("div",J,[Q,t.showXq?(n(),d("div",W,k(t.title)+"详情",1)):(n(),d("div",Y,k(t.title),1)),Z]),ee])]),l("div",te,[(n(),_(B,{data:s.tableData,height:"100%",key:m.value,"header-cell-style":{background:"#008FCD"},onRowClick:x},{default:u(()=>[(n(!0),d(D,null,U(s.columns,e=>(n(),d(D,null,[e.type==="slot"?(n(),_(y,{key:e.label,"show-overflow-tooltip":!0,label:e.label,property:e.property,align:e.align||"center"},{default:u(b=>[X(o.$slots,e.property,{currentCol:e,currentData:b.row},void 0,!0)]),_:2},1032,["label","property","align"])):(n(),_(y,{key:1,property:e.property,label:e.label,"show-overflow-tooltip":!0,align:e.align||"center"},null,8,["property","label","align"]))],64))),256))]),_:3},8,["data"]))]),l("div",ae,[p(V,{background:"",layout:"prev, pager, next,total","page-size":t.pagination.pageSize,total:t.pagination.total,"prev-text":"上一页","next-text":"下一页",onCurrentChange:C,"current-page":t.pagination.currentPage,"onUpdate:currentPage":r[0]||(r[0]=e=>t.pagination.currentPage=e)},null,8,["page-size","total","current-page"])])])]),_:3},8,["modelValue"])])}}},ce=M(le,[["__scopeId","data-v-68919937"]]);export{ce as D};

build/build/assets/emptyPage-4f7abf97.js

@@ -1 +1 @@
-import{_ as i}from"./error6-f64d959f.js";import{_ as e,e as s,f as t,q as _}from"./index-306f53b4.js";const d={},c={class:"error_main"},a=_('<img class="error_main_img" src="'+i+'" alt=""><div class="error_main_content">正在建设中，敬请期待</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),o=[a];function r(n,v){return s(),t("div",c,o)}const p=e(d,[["render",r]]);export{p as default};
+import{_ as i}from"./error6-f64d959f.js";import{_ as e,e as s,f as t,q as _}from"./index-c3050129.js";const d={},c={class:"error_main"},a=_('<img class="error_main_img" src="'+i+'" alt=""><div class="error_main_content">正在建设中，敬请期待</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),o=[a];function r(n,v){return s(),t("div",c,o)}const p=e(d,[["render",r]]);export{p as default};

build/build/assets/noConstruction-ca96d439.js

@@ -1 +1 @@
-import{_ as i}from"./error6-f64d959f.js";import{_ as s,e as t,f as o,q as e}from"./index-306f53b4.js";const n={},_={class:"error_main"},d=e('<img class="error_main_img" src="'+i+'" alt=""><div class="error_main_content">暂无相关内容，请退回上一页</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),c=[d];function r(a,v){return t(),o("div",_,c)}const u=s(n,[["render",r]]);export{u as default};
+import{_ as i}from"./error6-f64d959f.js";import{_ as s,e as t,f as o,q as e}from"./index-c3050129.js";const n={},_={class:"error_main"},d=e('<img class="error_main_img" src="'+i+'" alt=""><div class="error_main_content">暂无相关内容，请退回上一页</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),c=[d];function r(a,v){return t(),o("div",_,c)}const u=s(n,[["render",r]]);export{u as default};

build/build/assets/noNetwork-e9be097e.js

@@ -1 +1 @@
-import{_ as i,e,f as t,q as s}from"./index-306f53b4.js";const r=""+new URL("error4-af058904.png",import.meta.url).href;const o={},d={class:"error_main"},n=s('<img class="error_main_img" src="'+r+'" alt=""><div class="error_main_content">网络错误，请检查网络连接是否正常</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),_=[n];function c(a,v){return e(),t("div",d,_)}const m=i(o,[["render",c]]);export{m as default};
+import{_ as i,e,f as t,q as s}from"./index-c3050129.js";const r=""+new URL("error4-af058904.png",import.meta.url).href;const o={},d={class:"error_main"},n=s('<img class="error_main_img" src="'+r+'" alt=""><div class="error_main_content">网络错误，请检查网络连接是否正常</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),_=[n];function c(a,v){return e(),t("div",d,_)}const m=i(o,[["render",c]]);export{m as default};

build/build/assets/noResults-2796122d.js

@@ -1 +1 @@
-import{_ as i,e as s,f as e,q as t}from"./index-306f53b4.js";const d=""+new URL("error5-ddc90da0.png",import.meta.url).href;const n={},r={class:"error_main"},_=t('<img class="error_main_img" src="'+d+'" alt=""><div class="error_main_content">暂无相关搜索结果，请更换关键字搜索</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),c=[_];function o(a,v){return s(),e("div",r,c)}const m=i(n,[["render",o]]);export{m as default};
+import{_ as i,e as s,f as e,q as t}from"./index-c3050129.js";const d=""+new URL("error5-ddc90da0.png",import.meta.url).href;const n={},r={class:"error_main"},_=t('<img class="error_main_img" src="'+d+'" alt=""><div class="error_main_content">暂无相关搜索结果，请更换关键字搜索</div><div class="unit"><div> 应用归属单位 </div><div> 浙江省龙游县数据局 </div></div><div class="unit"><div> 应用管理员 </div><div> 王昊 </div></div><div class="unit"><div> 联系方式 </div><div> 18368625409 </div></div>',5),c=[_];function o(a,v){return s(),e("div",r,c)}const m=i(n,[["render",o]]);export{m as default};

build/build/assets/rwTable-69d5c517.js

@@ -0,0 +1 @@
+import{u as n,a as b,d as c,b as m,s,e as d,f as h,v as t,x as u,i}from"./index-c3050129.js";const y={__name:"rwTable",setup(_){n();const o=b(),e=c({xh:"",bm:"",columns:[{label:"姓名",property:"xm",width:"90"},{label:"身份证",property:"sfz"},{label:"地址",property:"dz"},{label:"年龄",property:"nl",width:"60"},{label:"人口标签",property:"bq",type:"slot"}],tableData:[]}),p=()=>{i.get(`/api/ggfwyth/pg/wxsbmRyxx/${e.xh}/${e.bm}`).then(a=>{a.code==200?(console.log(a.data),e.tableData=a.data):ElMessage.warning({message:a.message})})};return m(()=>{e.xh=o.query.xh,e.bm=o.query.bm,console.log(11,e.tableData),p()}),(a,x)=>{const l=s("el-table-column"),r=s("el-table");return d(),h("div",null,[t(r,{data:e.tableData,stripe:"",border:"","max-height":"100vh",style:{width:"100%"}},{default:u(()=>[t(l,{prop:"xm",label:"姓名",width:"60"}),t(l,{prop:"sfzhm",label:"身份证号"}),t(l,{prop:"dz",label:"地址"}),t(l,{prop:"nl",label:"年龄",width:"60"}),t(l,{prop:"bq",label:"人口标签"})]),_:1},8,["data"])])}}};export{y as default};

build/build/index.html

@@ -8,7 +8,7 @@
   <title>公共服务一体化驾驶舱</title>
   <!-- <script type="text/javascript"
     src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=2KLQUajGSpNL2DInxT6BwdPklMNpG3hw"></script> -->
-  <script type="module" crossorigin src="./assets/index-306f53b4.js"></script>
+  <script type="module" crossorigin src="./assets/index-c3050129.js"></script>
   <link rel="stylesheet" href="./assets/index-9c06b95a.css">
 </head>
 

src/utils/request.js

@@ -3,7 +3,7 @@ import { ElMessage } from "element-plus";
 import tools from "@/utils/tools";
 import router from "../router";
 
-// axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
+axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
 axios.defaults.timeout = 120000;
 
 // HTTP request 拦截器

src/view/echarts_infabt/eP1.vue

@@ -0,0 +1,248 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 350px"></div>
+</template>
+
+<script setup>
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+} from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  list2: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const data = reactive({
+  list: [],
+  list2: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const chart = ref(); // 创建DOM引用
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      padding: [20, 10, 20, 10],
+      formatter: "{b0}<br />{a1}:{c1}<br /> ",
+    },
+    // legend: {
+    //   data: ["糖尿病人数", "高血压人数"],
+    //   top: "6%",
+    //   right: "11%",
+    //   textStyle: {
+    //     fontSize: 16,
+    //     color: "#ffffff",
+    //   },
+    // },
+    grid: {
+      top: "25%",
+      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,
+        },
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(226, 226, 226, 0.3)",
+          width: 1,
+        },
+      },
+      axisLabel: {
+        //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: "#ffffff",
+          fontSize: 16,
+        },
+      },
+    },
+    series: [
+      {
+        name: "背景",
+        type: "bar",
+        data: data.bg,
+        showBackground: true,
+        backgroundStyle: {
+          color: "rgba(180, 180, 180, 0.2)",
+        },
+      },
+      {
+        name: "出生人数",
+        type: "line",
+        stack: "Total",
+        symbol: "emptyCircle",
+        smooth: true,
+        symbolSize: 10,
+        itemStyle: {
+          borderColor: "#E8FF00",
+          borderWidth: 1,
+          color: "#E8FF00",
+        },
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+          formatter: function (data) {
+            return data.value;
+          },
+        },
+        areaStyle: {
+          color: "#F4F65B",
+          normal: {
+            //线性渐变，前4个参数分别是x0,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, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          },
+        },
+        data: data.list,
+      },
+      // {
+      //   name: "高血压人数",
+      //   type: "line",
+      //   stack: "Total",
+      //   symbol: "emptyCircle",
+      //   smooth: true,
+      //   symbolSize: 10,
+      //   itemStyle: {
+      //     borderColor: "#00FCFF",
+      //     borderWidth: 1,
+      //     color: "#00FCFF",
+      //   },
+      //   label: {
+      //     show: true,
+      //     color: "#ffffff",
+      //     position: "top",
+      //     formatter: function (data) {
+      //       return data.value;
+      //     },
+      //   },
+      //   areaStyle: {
+      //     color: "#F4F65B",
+      //     normal: {
+      //       //线性渐变，前4个参数分别是x0,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(0, 252, 255, 0.50)",
+      //           },
+      //           {
+      //             offset: 1,
+      //             color: "rgba(0, 252, 255, 0)",
+      //           },
+      //         ],
+      //         false
+      //       ),
+      //       shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+      //     },
+      //   },
+      //   data: data.list2,
+      // },
+    ],
+  };
+};
+watch(
+  () => props.list,
+  (newValue, oldValue) => {
+    setTimeout(() => {
+      data.list = props.list;
+      data.list2 = props.list2;
+      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.list2 = props.list2;
+    data.year = props.year;
+    data.year.forEach(() => {
+      data.bg.push(0);
+    });
+    console.log(data.bg);
+
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped></style>

src/view/echarts_infabt/eP2.vue

@@ -0,0 +1,236 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 330px"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const data = reactive({
+  list: [],
+  year: [],
+  option: {},
+  bg: [],
+});
+//职称结构取数
+
+var rich = {
+  name: {
+    color: "#666666",
+    fontSize: 14,
+    padding: [8, 30, 0, 30],
+    fontWeight: "400",
+    align: "left",
+  },
+  value: {
+    color: "#333",
+    fontSize: 15,
+    padding: [0, 30, 8, 30],
+    fontWeight: "500",
+    align: "left",
+  },
+  percent: {
+    color: "#FFF",
+    align: "right",
+    fontSize: 15,
+    fontWeight: "500",
+    //padding: [0, 5]
+  },
+  hr: {
+    borderColor: "#DFDFDF",
+    width: "100%",
+    borderWidth: 1,
+    height: 0,
+  },
+  cir: {
+    fontSize: 26,
+  },
+};
+var colorList = ["#3BAEFF", "#41EDD5", "#FFC371", "#797AFF"];
+
+const chart = ref(); // 创建DOM引用
+
+const getOption = () => {
+  data.option = {
+    legend: {
+      show: true,
+      width: "80%",
+      top: "5%",
+      textStyle: {
+        inside: true,
+        color: "#9FC3E7",
+        padding: [14, 0, 10, 0],
+        align: "left",
+        verticalAlign: "center",
+        fontSize: 14,
+        rich: {},
+      },
+      // icon: "rect",
+      itemGap: 10,
+      itemWidth: 12,
+      itemHeight: 12,
+      // bottom: '15%'
+    },
+
+    tooltip: {
+      trigger: "item",
+    },
+    series: [
+      {
+        itemStyle: {
+          normal: {
+            color: function (params) {
+              return colorList[params.dataIndex];
+            },
+          },
+        },
+        type: "pie",
+        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 `{b|${params.value}%}{a|${params.name}}`;
+          },
+          // 富文本样式
+          rich: {
+            // a样式
+            a: {
+              // 内边距
+              padding: [-14, 10, 40, -70],
+              // 字体大小
+              fontSize: "12px",
+              // 字体
+              fontFamily: "MicrosoftYaHei",
+              // 字体颜色
+              color: "#fff",
+            },
+            // b样式
+            b: {
+              // 内边距
+              padding: [0, 10, 55, -70],
+              // 字体大小
+              fontSize: "15px",
+              // 字体
+              fontFamily: "MicrosoftYaHei-Bold, MicrosoftYaHei",
+              // 字体粗细
+              fontWeight: "bold",
+              // 字体颜色
+              color: "#fff",
+            },
+          },
+        },
+        // label: {
+        //   textStyle: {
+        //     color: "white", // 改变标示文字的颜色
+        //     fontSize: 18, //文字大小
+        //   },
+        //   formatter: "{b}:{c}" + "个\n\n",
+        //   borderWidth: 20,
+        //   borderRadius: 4,
+        //   padding: [0, -80],
+        // },
+        labelLine: {
+          normal: {
+            length: 40, // 改变标示线的长度
+            length2: 40,
+            // lineStyle: {
+            //   color: "white", // 改变标示线的颜色
+            // },
+          },
+        },
+        data: [
+          { name: "男", value: 300 },
+          { name: "女", value: 200 },
+        ],
+      },
+      {
+        name: "外边框",
+        type: "pie",
+        tooltip: {
+          show: false,
+        },
+        clockWise: false, //顺时加载
+        hoverAnimation: false, //鼠标移入变大
+        center: ["50%", "50%"], //这里跟上面那组一样即可
+        radius: ["52%", "52%"], //这里根据自己的需要自行调整，但是两个值要一样大哦，如果小于上方设置的最小内圆30%则为内阴影，大于外圆60%则为外阴影
+        label: {
+          normal: {
+            show: false, //重点：此处主要是为了不展示data中的value和name
+          },
+        },
+        data: [
+          {
+            value: 1, //此处的值无所谓是多少
+            name: "", //因为不展示label，可不填
+            itemStyle: {
+              //边框样式，此处我们设置的浅蓝色，颜色可自行修改
+              normal: {
+                borderWidth: 20, //边框宽度
+                // borderColor: colorList, //边框颜色
+                borderColor: "rgba(94, 183, 249,  0.13)", //边框颜色
+              },
+            },
+          },
+        ],
+      },
+    ],
+  };
+};
+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);
+});
+</script>
+
+<style scoped></style>

src/view/echarts_infabt/eP3.vue

@@ -0,0 +1,620 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 100%"></div>
+</template>
+
+<script setup>
+import { onMounted, onBeforeMount, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+const emit = defineEmits(["shuju"]);
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+const chart = ref(); // 创建DOM引用
+
+const colors = [
+  {
+    left: "rgba(234, 162, 57, .16)",
+    right: "rgba(234, 162, 57, .6)",
+    top: "rgba(234, 162, 57, 1)",
+    bottom: "rgba(234, 162, 57, .46)",
+    front: "rgba(234, 162, 57, .66)",
+  },
+  {
+    left: "rgba(14, 252, 255, .16)",
+    right: "rgba(14, 252, 255, .6)",
+    top: "rgba(14, 252, 255, 1)",
+    bottom: "rgba(14, 252, 255,  .46)",
+    front: "rgba(14, 252, 255, .66)",
+  },
+];
+// const valueList = [20, 53, 47, 65, 29, 11, 10];
+const data = reactive({
+  list: [],
+  option: {},
+  Max: 20000,
+  valueList: [4504, 16086, 6130, 2844, 4967, 179, 1685, 5010],
+  valueList2: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
+  xxname: ["2020", "2021", "2022", "2023"],
+});
+// 注册5个面图形:左侧、前面、右面、上面、下面
+//c0:左下角，c1：右下角,c2:右上角，c3：左上角
+// 绘制左侧面-ok rgba(103, 180, 233, 0.04)
+const CubeLeft_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 27, shape.y - 14];
+    const c2 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeFront_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 18, shape.y];
+    const c2 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    const c3 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeRight_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 18, shape.y];
+    const c1 = [shape.x - 5, shape.y - 14];
+    const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeTop_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const c0 = [shape.x - 40, shape.y];
+    const c1 = [shape.x - 18, shape.y];
+    const c2 = [shape.x - 5, shape.y - 14];
+    const c3 = [shape.x - 27, shape.y - 14];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeBottom_1 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+
+    const c0 = [xAxisPoint[0] - 40, xAxisPoint[1]];
+    const c1 = [xAxisPoint[0] - 18, xAxisPoint[1]];
+    const c2 = [xAxisPoint[0] - 5, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 27, xAxisPoint[1] - 14];
+
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+
+echarts.graphic.registerShape("CubeLeft_1", CubeLeft_1);
+echarts.graphic.registerShape("CubeFront_1", CubeFront_1);
+echarts.graphic.registerShape("CubeRight_1", CubeRight_1);
+echarts.graphic.registerShape("CubeTop_1", CubeTop_1);
+echarts.graphic.registerShape("CubeBottom_1", CubeBottom_1);
+// -------------------------
+const CubeLeft_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x + 13, shape.y - 14];
+    const c2 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeFront_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x + 22, shape.y];
+    const c2 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    const c3 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeRight_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const xAxisPoint = shape.xAxisPoint;
+    const c0 = [shape.x + 22, shape.y];
+    const c1 = [shape.x + 35, shape.y - 14];
+    const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeTop_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    const c0 = [shape.x - 0, shape.y];
+    const c1 = [shape.x + 22, shape.y];
+    const c2 = [shape.x + 35, shape.y - 14];
+    const c3 = [shape.x + 13, shape.y - 14];
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+const CubeBottom_2 = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+  },
+  buildPath: function (ctx, shape) {
+    // 会canvas的应该都能看得懂，shape是从custom传入的
+    const xAxisPoint = shape.xAxisPoint;
+
+    const c0 = [xAxisPoint[0] - 0, xAxisPoint[1]];
+    const c1 = [xAxisPoint[0] + 22, xAxisPoint[1]];
+    const c2 = [xAxisPoint[0] + 35, xAxisPoint[1] - 14];
+    const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 14];
+
+    ctx
+      .moveTo(c0[0], c0[1])
+      .lineTo(c1[0], c1[1])
+      .lineTo(c2[0], c2[1])
+      .lineTo(c3[0], c3[1])
+      .closePath();
+  },
+});
+
+echarts.graphic.registerShape("CubeLeft_2", CubeLeft_2);
+echarts.graphic.registerShape("CubeFront_2", CubeFront_2);
+echarts.graphic.registerShape("CubeRight_2", CubeRight_2);
+echarts.graphic.registerShape("CubeTop_2", CubeTop_2);
+echarts.graphic.registerShape("CubeBottom_2", CubeBottom_2);
+
+// ------------------------------
+const getOption = () => {
+  data.option = {
+    legend: {
+      data: [
+        "适龄生育妇女",
+        "育龄妇女",
+      ],
+      top: "0%",
+      right: "30%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}:</br>{a0}:{c0}</br>{a1}:{c1}",
+    },
+    grid: {
+      left: 0,
+      right: 0,
+      bottom: 10,
+      top: 40,
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        data: data.xxname,
+        axisLine: {
+          show: false,
+        },
+        offset: 10,
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: "#fff",
+          fontSize: 16,
+          formatter: function (value) {
+            return value.length > 3 ? value.slice(0, 2) + "..." : value;
+          },
+        },
+      },
+      {
+        type: "category",
+        data: data.xxname,
+        axisLine: {
+          show: false,
+        },
+        offset: 10,
+
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+          color: "#fff",
+          fontSize: 16,
+        },
+      },
+    ],
+    yAxis: {
+      min: 0,
+      max: data.Max,
+      // interval: 100,
+      type: "value",
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "rgba(255, 255, 255, .16)",
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(255, 255, 255, .16)",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        fontSize: 16,
+        color: "#fff",
+      },
+    },
+    series: [
+      {
+        xAxisIndex: 0,
+        name: "适龄生育妇女",
+        type: "custom",
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
+
+          return {
+            type: "group",
+            children: [
+              {
+                type: "CubeBottom_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["bottom"],
+                },
+              },
+              {
+                type: "CubeLeft_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["left"],
+                },
+              },
+              {
+                type: "CubeFront_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["front"],
+                },
+              },
+              {
+                type: "CubeRight_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["right"],
+                },
+              },
+              {
+                type: "CubeTop_1",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[0]["top"],
+                },
+              },
+            ],
+          };
+        },
+        //设置图例颜色
+        itemStyle: {
+          show: true,
+          color: {
+            type: "linear",
+            colorStops: [{ offset: 1, color: "rgba(234, 162, 57, 1)" }],
+          },
+        },
+        data: data.valueList,
+      },
+      {
+        xAxisIndex: 0,
+        name: "育龄妇女",
+        type: "custom",
+        renderItem: (params, api) => {
+          const location = api.coord([api.value(0), api.value(1)]);
+
+          return {
+            type: "group",
+            children: [
+              {
+                type: "CubeBottom_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["bottom"],
+                },
+              },
+              {
+                type: "CubeLeft_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["left"],
+                },
+              },
+              {
+                type: "CubeFront_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["front"],
+                },
+              },
+              {
+                type: "CubeRight_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["right"],
+                },
+              },
+              {
+                type: "CubeTop_2",
+                shape: {
+                  api,
+                  xValue: api.value(0),
+                  yValue: api.value(1),
+                  x: location[0],
+                  y: location[1],
+                  xAxisPoint: api.coord([api.value(0), 0]),
+                },
+                style: {
+                  fill: colors[1]["top"],
+                },
+              },
+            ],
+          };
+        },
+        //设置图例颜色
+        itemStyle: {
+          show: true,
+          color: {
+            type: "linear",
+            colorStops: [{ offset: 1, color: "rgba(14, 252, 255, 1)" }],
+          },
+        },
+        data: data.valueList2,
+      },
+      //顶部字体
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        label: {
+          show: true,
+          fontSize: 18,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value - 5;
+          },
+        },
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0)",
+        },
+
+        data: data.valueList.map((item) => parseInt(item) + 5),
+        barWidth: 30,
+      },
+      {
+        type: "bar",
+        xAxisIndex: 1,
+        label: {
+          show: true,
+          fontSize: 18,
+          position: "top",
+          color: "#ffffff",
+          formatter: function (data) {
+            return data.value - 5;
+          },
+        },
+        itemStyle: {
+          color: "rgba(221, 242, 255, 0)",
+        },
+
+        data: data.valueList2.map((item) => parseInt(item) + 5),
+        barWidth: 20,
+      },
+    ],
+  };
+};
+const setChart = () => {
+  var myChart = echarts.init(chart.value);
+  myChart.setOption(data.option);
+  myChart.on("click", function (params) {
+    emit("shuju", params.name, params.seriesIndex);
+  });
+};
+const getMaxCeilingValue = (arr) => {
+  let max = Math.max(...arr); // 找到数组中的最大值
+  return Math.ceil(max / 100) * 100; // 将最大值向上取整到最近的100的倍数
+};
+const setChart1 = () => {
+  data.valueList = [];
+  data.xxname = [];
+  if (data.list.length !== 0) {
+    data.list.forEach((item) => {
+      data.xxname.push(item.name); //信息名
+      data.valueList.push(item.num); //信息数
+    });
+  }
+};
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    data.xxname.forEach((item, index) => {
+      props.list.forEach((itemm, indexx) => {
+        if (item == itemm.xzjd) {
+          data.valueList[index] = itemm.qrrs;
+          data.valueList2[index] = itemm.qcrs;
+        }
+      });
+    });
+    getOption();
+    setChart();
+  }, 800);
+});
+</script>
+
+<style lang="scss" scoped></style>

src/view/echarts_infabt/eP4.vue

@@ -0,0 +1,272 @@
+<template>
+  <div ref="chart" style="width: 100%; height: 90%"></div>
+</template>
+
+<script setup >
+import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+  year: {
+    type: Array,
+    default: () => [],
+  },
+});
+const data = reactive({
+  list: [],
+  zgffrc: [], //育龄妇女
+  cxffrc: [], //婴幼儿
+  year: [],
+  option: {},
+  bg: [],
+});
+
+const chart = ref(); // 创建DOM引用
+
+const getOption = () => {
+  data.option = {
+    tooltip: {
+      trigger: "axis",
+      formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3} ",
+    },
+    legend: {
+      data: ["育龄妇女", "婴幼儿"],
+      top: "6%",
+      right: "11%",
+      textStyle: {
+        fontSize: 16,
+        color: "#ffffff",
+      },
+    },
+    grid: {
+      top: "23%",
+      left: "1%",
+      right: "10%",
+      bottom: "0%",
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "value",
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+        data: data.year,
+      },
+      {
+        axisTick: false,
+        type: "value",
+        data: data.year,
+        axisLabel: {
+          show: false,
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: "category",
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "rgba(226, 226, 226, 0.3)",
+            width: 1,
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
+          },
+        },
+      },
+      {
+        type: "category",
+        min: 0,
+        max: 100,
+        splitLine: {
+          show: false,
+          lineStyle: {
+            type: "solid",
+            color: "rgb(221, 242, 255,0.1)",
+          },
+        },
+        axisLine: {
+          show: false,  
+          lineStyle: {
+            type: "dotted",
+          },
+        },
+        axisLabel: {
+          show: false,
+          fontSize: 16,
+          fontFamily: "MicrosoftYaHei",
+          color: "#ffffff",
+          lineHeight: 19,
+        },
+      },
+    ],
+    series: [
+      // {
+      //   z: 1,
+      //   name: "上部1",
+      //   type: "pictorialBar",
+      //   symbolPosition: "end",
+      //   data: data.zgffrc,
+      //   symbol: "diamond",
+      //   symbolOffset: ["-60%", "-50%"],
+      //   symbolSize: [17, 10],
+      //   itemStyle: {
+      //     borderColor: "#2fffa4",
+      //     color: "rgba(142, 187, 255, 1)",
+      //   },
+      // },
+      {
+        z: 1,
+        name: "育龄妇女",
+        type: "bar",
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
+        data: data.zgffrc,
+        barWidth: "18%",
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+          formatter: function (data) {
+            return data.value  + "万";
+          },
+        },
+        // itemStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     {
+        //       offset: 0,
+        //       color: "rgba(142, 187, 255, 1)",
+        //     },
+        //     {
+        //       offset: 1,
+        //       color: "rgba(142, 187, 255, 0.20)",
+        //     },
+        //   ]),
+        // },
+        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)" },
+            ],
+          },
+        },
+      },
+      // {
+      //   z: 2,
+      //   name: "上部1",
+      //   type: "pictorialBar",
+      //   symbolPosition: "end",
+      //   data: data.cxffrc,
+      //   symbol: "diamond",
+      //   symbolOffset: ["62%", "-50%"],
+      //   symbolSize: [17, 10],
+      //   itemStyle: {
+      //     borderColor: "#32ffee",
+      //     color: "rgba(23, 237, 255, 1)",
+      //   },
+      // },
+      {
+        z: 2,
+        name: "婴幼儿",
+        type: "bar",
+        barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
+        data: data.cxffrc,
+        barWidth: "18%",
+        label: {
+          show: true,
+          color: "#ffffff",
+          position: "top",
+          formatter: function (data) {
+            return data.value  + "万";
+          },
+        },
+        // itemStyle: {
+        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //     {
+        //       offset: 0,
+        //       color: "rgba(23, 237, 255, 1)",
+        //     },
+        //     {
+        //       offset: 1,
+        //       color: "rgba(23, 237, 255, 0.20)",
+        //     },
+        //   ]),
+        // },
+              itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            x2: 1,
+            y: 0,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
+              { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
+              { offset: 1, color: "rgba(23, 237, 255, .5)" },
+            ],
+          },
+        },
+      },
+      // {
+      //   type: "bar",
+      //   xAxisIndex: 1,
+      //   yAxisIndex: 1,
+      //   itemStyle: {
+      //     color: "rgba(221, 242, 255, 0.1)",
+      //   },
+      //   data: data.bg.map(() => 100),
+      //   barWidth: 50,
+      // },
+    ],
+  };
+};
+const setChart = () => {
+  // Vue3中： 需要引入
+  var myChart = echarts.init(chart.value);
+
+  // 使用刚指定的配置项和数据显示图表。
+  myChart.setOption(data.option);
+};
+
+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);
+    getOption();
+    setChart();
+  }, 600);
+});
+</script>
+
+<style scoped>
+</style>

src/view/person/rwTable.vue

@@ -45,11 +45,17 @@
       max-height="100vh"
       style="width: 100%"
     >
+      <el-table-column prop="xh" label="序号" width="50" />
       <el-table-column prop="xm" label="姓名" width="60" />
-      <el-table-column prop="sfzhm" label="身份证号" />
+      <el-table-column prop="sfzhm" label="身份证" />
+      <el-table-column prop="sfzhm" label="救助证号" />
+      <el-table-column prop="sfzhm" label="联系电话" />
+      <el-table-column prop="sfzhm" label="乡镇(街道)" />
+      <el-table-column prop="sfzhm" label="村社" />
       <el-table-column prop="dz" label="地址" />
-      <el-table-column prop="nl" label="年龄" width="60" />
+      <el-table-column prop="sfzhm" label="救助日期" />
-      <el-table-column prop="bq" label="人口标签" />
+      <!-- <el-table-column prop="nl" label="年龄" width="60" /> -->
+      <!-- <el-table-column prop="bq" label="人口标签" /> -->
     </el-table>
   </div>
 </template>
@@ -68,7 +74,7 @@ const search = reactive({
 });
 
 const titleList = reactive([
-  {
+  { 
     title: "服务项目（未完成）",
     id: 1,
   },
@@ -140,7 +146,7 @@ const getDate = () => {
 const personDetails = () => {
   http.get(`/api/ggfwyth/pg/wxsbmRyxx/${data.xh}/${data.bm}`).then((res) => {
     if (res.code == 200) {
-      console.log(res.data);
+      // console.log(res.data);
       data.tableData = res.data;
     } else {
       ElMessage.warning({
@@ -164,7 +170,7 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   overflow: auto;
-  padding: 20px;
+  padding: 6px;
   box-sizing: border-box;
   .tableheader {
     box-sizing: border-box;
@@ -172,10 +178,10 @@ onMounted(() => {
     display: flex;
     justify-content: space-between;
     padding-bottom: 20px;
-    margin-bottom: 20px ;
+    margin-bottom: 20px;
     border-bottom: 2px solid #ccc;
     .tableheader_title {
-      font-size: 18px;
+      font-size: 16px;
       font-weight: 600;
       text-align: center;
       position: relative;
@@ -195,7 +201,7 @@ onMounted(() => {
     }
   }
   .select {
-    margin-bottom: 20px ;
+    margin-bottom: 20px;
     width: 100%;
     display: flex;
     justify-content: space-between;

src/view/sy_table.vue

@@ -148,6 +148,7 @@
         </div>
       </div>
     </div>
+    <infant v-if="gaikuangList.infant"></infant>
     <work v-if="gaikuangList.work"></work>
     <education v-if="gaikuangList.education"></education>
     <yl v-if="gaikuangList.yl"></yl>
@@ -173,6 +174,7 @@ import Bj1 from "@/assets/sy-table/sy-table7.png";
 import Bj2 from "@/assets/sy-table/sy-table4.png";
 import Bj3 from "@/assets/sy-table/sy-table5.png";
 import Bj4 from "@/assets/sy-table/sy-table6.png";
+import infant from "./table_gk/gk_infant.vue";
 import work from "./table_gk/gk_work.vue";
 import education from "./table_gk/gk_education.vue";
 import yl from "./table_gk/gk_yl.vue";
@@ -227,14 +229,18 @@ const data = reactive({
       son: [
         {
           id: "0",
-          name: "优孕优生服务",
+          name: "概况",
         },
         {
           id: "1",
-          name: "儿童健康服务",
+          name: "优孕优生服务",
         },
         {
           id: "2",
+          name: "儿童健康服务",
+        },
+        {
+          id: "3",
           name: "儿童关爱服务",
         },
       ],
@@ -510,6 +516,7 @@ const data = reactive({
   Bj: [Bj, Bj1, Bj2, Bj3, Bj4],
 });
 const gaikuangList = reactive({
+  infant: false,
   work: false,
   education: false,
   yl: false,
@@ -519,6 +526,7 @@ const gaikuangList = reactive({
 const show_7yx = ref(true);
 const gk = computed(() => {
   if (
+    gaikuangList.infant ||
     gaikuangList.work ||
     gaikuangList.hygiene ||
     gaikuangList.education ||
@@ -538,7 +546,8 @@ const tapshow = (parentId, childId) => {
   localStorage.setItem("taps1", JSON.stringify(parentId));
   if (
     childId == 0 &&
-    (parentId.name == "弱有所扶" ||
+    (parentId.name == "幼有所育" ||
+      parentId.name == "弱有所扶" ||
       parentId.name == "学有所教" ||
       parentId.name == "老有所养" ||
       parentId.name == "病有所医")
@@ -591,11 +600,12 @@ const toggleVisibility = (val, show) => {
   }
 };
 const gaikuang = (name) => {
-  // console.log(4444, name);
   for (let name in gaikuangList) {
     gaikuangList[name] = false;
   }
-  if (name == "弱有所扶") {
+  if (name == "幼有所育") {
+    gaikuangList.infant = true;
+  } else if (name == "弱有所扶") {
     gaikuangList.work = true;
   } else if (name == "学有所教") {
     gaikuangList.education = true;