住有所居

This commit is contained in:
姚宇浩 2024-10-18 15:22:15 +08:00
parent 64c2a97c4c
commit f4739af199
4 changed files with 818 additions and 167 deletions

View File

@ -0,0 +1,446 @@
<template>
<div ref="chart" style="width: 96%; 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(60, 143, 255, .16)",
right: "rgba(60, 143, 255, .6)",
top: "rgba(60, 143, 255, 1)",
bottom: "rgba(60, 143, 255, .46)",
front: "rgba(60, 143, 255, .66)",
},
];
const maxList = ref([]);
// const valueList = [20, 53, 47, 65, 29, 11, 10];
const data = reactive({
list: [],
option: {},
Max: 200,
valueList: [20, 53, 47, 65, 29, 11, 10],
xxname: [
],
});
// 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) {
// canvasshapecustom
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x - 7, shape.y - 14];
const c2 = [xAxisPoint[0] - 7, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 20, 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) {
// canvasshapecustom
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x - 20, shape.y];
const c1 = [shape.x + 2, shape.y];
const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
const c3 = [xAxisPoint[0] - 20, 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 + 2, shape.y];
const c1 = [shape.x + 15, shape.y - 14];
const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] + 2, 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 - 20, shape.y];
const c1 = [shape.x + 2, shape.y];
const c2 = [shape.x + 15, shape.y - 14];
const c3 = [shape.x - 7, 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) {
// canvasshapecustom
const xAxisPoint = shape.xAxisPoint;
const c0 = [xAxisPoint[0] - 20, xAxisPoint[1]];
const c1 = [xAxisPoint[0] + 2, xAxisPoint[1]];
const c2 = [xAxisPoint[0] + 15, xAxisPoint[1] - 14];
const c3 = [xAxisPoint[0] - 7, 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 getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
formatter: "{b0}:{c1}",
},
grid: {
left: 10,
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: [
//
{
type: "custom",
renderItem: function (params, api) {
// console.log(api);
const location = api.coord([api.value(0), api.value(1)]);
return {
type: "group",
children: [
{
type: "CubeBottom_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .16)",
},
},
{
type: "CubeLeft_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .04)",
},
},
{
type: "CubeFront_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .16)",
},
},
{
type: "CubeRight_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .08)",
},
},
{
type: "CubeTop_1",
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0]),
},
style: {
fill: "rgba(103, 180, 233, .26)",
},
},
],
};
},
data: maxList.value,
},
{
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"],
},
},
],
};
},
data: data.valueList,
},
//
{
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: 20,
},
],
};
};
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
myChart.on("click", function (params) {
emit('shuju',params.name);
});
};
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.list = props.list;
setChart1();
data.Max = getMaxCeilingValue(data.valueList);
maxList.value = data.valueList.map((item) => parseInt(data.Max) * 0.9);// data.Max 90%
getOption();
setChart();
}, 800);
});
</script>
<style lang="scss" scoped></style>

View File

@ -1,9 +1,9 @@
<template>
<div ref="chart" style="width: 100%; height: 330px"></div>
<div ref="chart" style="width: 100%; height: 430px"></div>
</template>
<script setup>
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
import { onMounted, reactive, ref, onBeforeMount, defineProps,watch } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
@ -11,16 +11,10 @@ const props = defineProps({
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const data = reactive({
list: [],
year: [],
option: {},
bg: [],
});
//
@ -64,11 +58,10 @@ const getOption = () => {
data.option = {
legend: {
show: true,
width: "80%",
top: "5%",
textStyle: {
inside: true,
color: "#9FC3E7",
color: "#ffffff",
padding: [14, 0, 10, 0],
align: "left",
verticalAlign: "center",
@ -77,7 +70,7 @@ const getOption = () => {
},
// icon: "rect",
itemGap: 10,
itemWidth: 12,
itemWidth: 20,
itemHeight: 12,
// bottom: '15%'
},
@ -96,75 +89,17 @@ const getOption = () => {
},
type: "pie",
radius: ["20%", "50%"],
center: ["50%", "50%"],
center: ["55%", "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}}`;
textStyle: {
color: "white", //
fontSize: 18, //
},
//
rich: {
// a
a: {
//
padding: [-14, 10, 40, -70],
//
fontSize: "12px",
//
fontFamily: "MicrosoftYaHei",
//
color: "#fff",
formatter: "{b}:{c}" + "个\n\n",
borderWidth: 20,
borderRadius: 4,
padding: [0, -100],
},
// 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, // 线
@ -174,10 +109,7 @@ const getOption = () => {
// },
},
},
data: [
{ name: "男", value: 300 },
{ name: "女", value: 200 },
],
data: data.list,
},
{
name: "外边框",
@ -187,7 +119,7 @@ const getOption = () => {
},
clockWise: false, //
hoverAnimation: false, //
center: ["50%", "50%"], //
center: ["55%", "50%"], //
radius: ["52%", "52%"], //30%60%
label: {
normal: {
@ -219,14 +151,14 @@ const setChart = () => {
// 使
myChart.setOption(data.option);
};
watch(()=>props.list,()=>{
data.list=props.list
getOption();
setChart();
})
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.year = props.year;
data.year.forEach(() => {
data.bg.push(0);
});
data.list=props.list
getOption();
setChart();
}, 600);

View File

@ -263,6 +263,9 @@
v-if="currentData.camera"
/>
</template>
<template #zxs="{ currentCol, currentData }">
<div style="width: 10px; height: 10px" v-if="currentData.zxs">*</div>
</template>
</Dialog>
<DialogCamera
:cameraShow="sxtShow.show"
@ -1023,7 +1026,12 @@ const sxtShow = reactive({
const tableType = reactive({
url: "",
title: "人员列表",
columns: [
columns: [],
data: [],
type: true, //truefalse
});
const table_column_list = reactive({
sxt: [
{
label: "序号",
property: "index",
@ -1043,10 +1051,6 @@ const tableType = reactive({
label: "年龄",
property: "age",
},
// {
// label: "",
// property: "zzmm",
// },
{
label: "居住状态",
property: "jzzt",
@ -1073,8 +1077,54 @@ const tableType = reactive({
type: "slot",
},
],
data: [],
zxs: [
{
label: "序号",
property: "index",
width: "50",
type: "index",
align: "center",
},
{
label: "姓名",
property: "nm",
},
{
label: "手机号",
property: "contactTel",
},
{
label: "年龄",
property: "age",
},
{
label: "居住状态",
property: "jzzt",
type: "slot",
},
{
label: "民族",
property: "ethnic",
},
{
label: "性别",
property: "gender",
},
{
label: "户口登记地",
property: "domicAddr",
width: "200px",
},
{
label: "",
property: "zxs",
width: "30px",
type: "slot",
},
],
});
//
const pagination = reactive({
total: 100,
@ -1148,8 +1198,6 @@ const bjtitle = computed(() => {
}
});
const openqx = () => {
console.log(1111);
if (jsqx.value) {
ElMessageBox.confirm("确定要取消权限吗?")
.then(() => {
@ -2977,7 +3025,14 @@ const get_dk_zyys = async (sj,start,end) => {
});
zyysCenter.forEach((center) => {
if (item.committee == center.name) {
let a = { ...center, num: item.num,town: item.town,committee: item.committee,startAge:start,endAge:end };
let a = {
...center,
num: item.num,
town: item.town,
committee: item.committee,
startAge: start,
endAge: end,
};
zyys_data.value.center.push(a);
}
});
@ -3006,7 +3061,13 @@ const xr_dk_center_zyys = async () => {
});
};
//()
//
const zyys_table = reactive({
town: "",
committee: "",
startAge: "",
endAge: "",
});
const Xr_zyysNum = (polygon, indexx) => {
function createLabelDOM() {
var content = document.createElement("div");
@ -3072,19 +3133,20 @@ const Xr_zyysNum = (polygon, indexx) => {
zyys_center.value[indexx].addEventListener("click", () => {
console.log(polygon);
// cfCsZs.value = polygon.name;
open_detail_zyys(polygon.town, polygon.committee,polygon.startAge,polygon.endAge);
tableType.type = false;
tableType.columns = table_column_list.zxs;
zyys_table.town = polygon.town;
zyys_table.committee = polygon.committee;
zyys_table.startAge = polygon.startAge;
zyys_table.endAge = polygon.endAge;
open_detail_zyys();
});
};
const open_detail_zyys = (town,committee,start,end) => {
let age = "";
const open_detail_zyys = () => {
dialogShow.value = true;
http
.get(
`/api/ggfwyth/ysyzt/getRyJbxxList?page=${pagination.currentPage}&size=${
pagination.pageSize
}&committee=${committee}&town=${
town
}&startAge=${start}&endAge=${end}`
`/api/ggfwyth/ysyzt/getRyJbxxList?page=${pagination.currentPage}&size=${pagination.pageSize}&committee=${zyys_table.committee}&town=${zyys_table.town}&startAge=${zyys_table.startAge}&endAge=${zyys_table.endAge}`
)
.then((res) => {
if (res.code == 200) {
@ -3167,6 +3229,8 @@ const to_jd = async (item_name) => {
};
//
const open_detail = () => {
tableType.type = true;
tableType.columns = table_column_list.sxt;
let age = "";
let tagId;
if (choose.value.person == "9999") {
@ -3222,6 +3286,7 @@ const onsxt = () => {
//
const handlePagination = (current) => {
pagination.currentPage = current;
if (tableType.type) {
let age = "";
let tagId;
if (choose.value.person == "9999") {
@ -3230,19 +3295,7 @@ const handlePagination = (current) => {
} else if (choose.value.person == "6666") {
age = "";
person_detail2();
} else if (
// choose.value.person == "" ||
// choose.value.person == "" ||
// choose.value.person == "" ||
// choose.value.person == "" ||
// choose.value.person == "尿" ||
// choose.value.person == "退" ||
// choose.value.person == "" ||
// choose.value.person == "" ||
// choose.value.person == "" ||
// choose.value.person == ""
tsbq_pp.value.includes(choose.value.person)
) {
} else if (tsbq_pp.value.includes(choose.value.person)) {
age = "";
tsbq_id_total.value.forEach((item, index) => {
if (choose.value.person == item.name) {
@ -3254,6 +3307,9 @@ const handlePagination = (current) => {
age = choose.value.person;
person_detail(age);
}
} else {
open_detail_zyys();
}
};
//

View File

@ -12,6 +12,7 @@
:list="data.jsbgl"
v-if="showEchart"
style="width: 95%; margin-top: 10px"
@shuju="jsSj"
></eP3>
</div>
<div class="flex1">
@ -33,10 +34,7 @@
{{ item }}
</div>
</div>
<eP2
:list="data.medicalInsurance.ffrc"
:year="data.medicalInsurance.year"
></eP2>
<eP2 :list="data.wfjw.list"></eP2>
</div>
</div>
</div>
@ -50,13 +48,13 @@
</div>
<div class="shang">
<div class="shang_item">
<div class="title">物业小区</div>
<div class="title" @click="openTable('物业小区')">物业小区</div>
<div class="i">
<zwfw1 :list="data.fgl.list1" v-if="showEchart" />
</div>
</div>
<div class="shang_item">
<div class="title">专业物业</div>
<div class="title" @click="openTable('专业物业')">专业物业</div>
<div class="i">
<zwfw2 :list="data.fgl.list2" v-if="showEchart" />
</div>
@ -64,7 +62,7 @@
</div>
</div>
<div class="flex1" style="margin-top: 20px">
<div class="flex1" style="margin-top: -70px; z-index: 5">
<div class="yd_title center_2">
<div class="animate-border">
<i></i>
@ -74,14 +72,26 @@
<div class="wlsq">
<el-table
:data="data.tableData1"
style="width: 100%; height: 500px"
style="width: 100%; height: 550px"
class="table_border"
:row-style="rowState"
:header-cell-style="tableHeaderColor"
>
<el-table-column prop="name" label="社区名称" show-overflow-tooltip/>
<el-table-column prop="address" label="社区位置" show-overflow-tooltip/>
<el-table-column prop="text" label="社区材料" show-overflow-tooltip/>
<el-table-column
prop="name"
label="社区名称"
show-overflow-tooltip
/>
<el-table-column
prop="address"
label="社区位置"
show-overflow-tooltip
/>
<el-table-column
prop="text"
label="社区材料"
show-overflow-tooltip
/>
</el-table>
</div>
</div>
@ -121,25 +131,66 @@
</div>
<el-table
:data="data.tableData2"
style="width: 100%; height: 500px"
style="width: 100%; height: 480px"
class="table_border"
:row-style="rowState"
:header-cell-style="tableHeaderColor"
>
<el-table-column prop="starttime" label="开始时间" width="120" show-overflow-tooltip/>
<el-table-column
prop="starttime"
label="开始时间"
width="120"
show-overflow-tooltip
/>
<el-table-column prop="endtime" label="结束时间" width="120" show-overflow-tooltip/>
<el-table-column prop="address" label="地点" width="132" show-overflow-tooltip/>
<el-table-column prop="title" label="名称" width="132" show-overflow-tooltip/>
<el-table-column
prop="endtime"
label="结束时间"
width="120"
show-overflow-tooltip
/>
<el-table-column
prop="address"
label="地点"
width="132"
show-overflow-tooltip
/>
<el-table-column
prop="title"
label="名称"
width="132"
show-overflow-tooltip
/>
<el-table-column prop="finish" label="详情" width="120">
<template #default="scope">
<div>查看详情</div>
<div @click="goDetail(scope.row)">查看详情</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<Dialog
:dialogShow="dialogShow"
:columns="tableType.columns"
:title="tableType.title"
:tableData="tableType.data"
:pagination="pagination"
:showXq="false"
@close="close"
@handle="handlePagination"
>
</Dialog>
<DialogEcTy
:dialogShowEc="dialogShowEcTy"
:title="tableType.title"
:showXq="false"
@close="close"
>
<template #echart>
<dialog_bzxzf :list="data.bzxzf"></dialog_bzxzf>
</template>
</DialogEcTy>
</div>
</template>
@ -152,8 +203,13 @@ import eP4 from "../echarts_jz/eP4.vue";
import http from "@/utils/request.js";
import zwfw1 from "../echarts_jz/zwfw1.vue";
import zwfw2 from "../echarts_jz/zwfw2.vue";
import Dialog from "../dialog/dialog.vue";
import DialogEcTy from "../dialog/dialogEcTy.vue";
import dialog_bzxzf from "../echarts_jz/dialog_bzxzf.vue";
const data = reactive({
medicalInsurance: {},
wfjw: {
list: [],
},
fgl: {
list1: {
finish: 60,
@ -231,7 +287,34 @@ const data = reactive({
chooselist: ["城镇", "农村"],
choose: "城镇",
},
//
bzxzf: [
{ name: "龙洲街道", num: 1 },
{ name: "东华街道", num: 2 },
{ name: "湖镇镇", num: 3 },
{ name: "小南海镇", num: 4 },
{ name: "溪口镇", num: 5 },
{ name: "横山镇", num: 6 },
{ name: "塔石镇", num: 7 },
{ name: "詹家镇", num: 8 },
{ name: "罗家乡", num: 9 },
{ name: "庙下乡", num: 10 },
{ name: "沐尘畲族乡", num: 11 },
{ name: "模环乡", num: 12 },
{ name: "石佛乡", num: 13 },
{ name: "社阳乡", num: 14 },
{ name: "大街乡", num: 15 },
],
});
const wfjwsj_cz = [
{ name: "已解危数", value: 150 },
{ name: "已腾空解危数", value: 100 },
];
const wfjwsj_nc = [
{ name: "已解危数", value: 250 },
{ name: "已腾空解危数", value: 100 },
];
//
const tableHeaderColor = (arg) => {
return {
@ -262,12 +345,96 @@ const rowState = (row) => {
};
}
};
//-----
const dialogShow = ref(false);
const dialogShowEcTy = ref(false);
const tableType = reactive({
url: "",
title: "",
columns: [],
data: [],
});
const table_list = {
物业小区: {
url: "",
title: "物业小区详情清单",
column: [
{
label: "小区",
property: "xq",
},
{
label: "物业",
property: "wy",
},
{
label: "详情",
property: "xiangq",
},
],
},
专业物业: {
url: "",
title: "专业物业详情清单",
column: [
{
label: "小区",
property: "xq",
},
{
label: "物业",
property: "wy",
},
{
label: "详情",
property: "xiangq",
},
],
},
};
const openTable = (type) => {
tableType.url = table_list[type].url;
tableType.title = table_list[type].title;
tableType.columns = table_list[type].column;
dialogShow.value = true;
};
//
const pagination = reactive({
total: 100,
pageSize: 10,
currentPage: 1,
});
const close = () => {
dialogShow.value = false;
dialogShowEcTy.value = false;
pagination.currentPage = 1;
pagination.total = 100;
};
const handlePagination = (current) => {
pagination.currentPage = current;
};
//
const jsSj = (name, index) => {
if (index == 2) {
tableType.title = "保障型住房";
dialogShowEcTy.value = true;
}
};
//
const showEchart = ref(false);
const chooseWfjw = (val) => {
data.wfjw.choose = val
data.wfjw.choose = val;
if (val == "城镇") {
data.wfjw.list = wfjwsj_cz;
} else if (val == "农村") {
data.wfjw.list = wfjwsj_nc;
}
};
//
const goDetail = () => {};
const getData = async () => {
showEchart.value = true;
data.wfjw.list = wfjwsj_cz;
// await http.get("/api/ggfwyth/health").then((res) => {
// if (res.code == 200) {
// data.medicalInsurance = res.data.medicalInsurance;
@ -520,7 +687,7 @@ onMounted(() => {});
//
.wfjw {
width: 95%;
margin-top: 10px;
margin-top: 20px;
.wfjw_choose {
display: flex;
align-items: center;
@ -551,7 +718,7 @@ onMounted(() => {});
}
//
.shang {
margin-top: 20px;
margin-top: 40px;
display: flex;
justify-content: space-around;
&_item {
@ -570,10 +737,13 @@ onMounted(() => {});
color: #ffffff;
line-height: 20px;
letter-spacing: 2px;
z-index: 5;
cursor: pointer;
}
.i {
width: 100%;
height: 200px;
margin-top: -20px;
width: 90%;
height: 300px;
}
}
}
@ -595,7 +765,9 @@ onMounted(() => {});
flex-direction: column;
align-items: center;
.zzgc_item_title {
margin-top: 20px;
position: relative;
margin: 10px 0;
padding: 10px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 16px;
@ -609,6 +781,16 @@ onMounted(() => {});
rgba(255, 255, 255, 0) 100%
);
}
.zzgc_item_title::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 1px;
border: 2px solid #00e6ff;
}
}
}
//
@ -659,4 +841,39 @@ onMounted(() => {});
border: 1px solid #7aceff;
}
</style>
<style lang="scss" scoped>
//
:deep(.el-pagination > .is-last) {
color: #fff !important ;
}
:deep(.el-pagination.is-background .el-pager li) {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid #6bade1;
margin: 0;
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background: rgba(0, 144, 255, 0.49);
border: 1px solid #6bade1;
}
:deep(.el-pagination.is-background .btn-prev:disabled) {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid #6bade1;
}
:deep(.el-pagination.is-background .btn-next:disabled) {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid #6bade1;
}
:deep(.el-pagination.is-background .btn-prev) {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid #6bade1;
}
:deep(.el-pagination.is-background .btn-next) {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid #6bade1;
}
</style>