住有所居

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

View File

@ -263,6 +263,9 @@
v-if="currentData.camera" v-if="currentData.camera"
/> />
</template> </template>
<template #zxs="{ currentCol, currentData }">
<div style="width: 10px; height: 10px" v-if="currentData.zxs">*</div>
</template>
</Dialog> </Dialog>
<DialogCamera <DialogCamera
:cameraShow="sxtShow.show" :cameraShow="sxtShow.show"
@ -1023,7 +1026,12 @@ const sxtShow = reactive({
const tableType = reactive({ const tableType = reactive({
url: "", url: "",
title: "人员列表", title: "人员列表",
columns: [ columns: [],
data: [],
type: true, //truefalse
});
const table_column_list = reactive({
sxt: [
{ {
label: "序号", label: "序号",
property: "index", property: "index",
@ -1043,10 +1051,6 @@ const tableType = reactive({
label: "年龄", label: "年龄",
property: "age", property: "age",
}, },
// {
// label: "",
// property: "zzmm",
// },
{ {
label: "居住状态", label: "居住状态",
property: "jzzt", property: "jzzt",
@ -1073,8 +1077,54 @@ const tableType = reactive({
type: "slot", 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({ const pagination = reactive({
total: 100, total: 100,
@ -1148,8 +1198,6 @@ const bjtitle = computed(() => {
} }
}); });
const openqx = () => { const openqx = () => {
console.log(1111);
if (jsqx.value) { if (jsqx.value) {
ElMessageBox.confirm("确定要取消权限吗?") ElMessageBox.confirm("确定要取消权限吗?")
.then(() => { .then(() => {
@ -2741,7 +2789,7 @@ const changeys = (name) => {
zyys_center.value.length = 0; zyys_center.value.length = 0;
} }
} else { } else {
loadingss.value=true; loadingss.value = true;
csh(); csh();
clearPerson(); clearPerson();
yaosuList.value.push(name); yaosuList.value.push(name);
@ -2903,7 +2951,7 @@ const createZyys = (polygon, indexx, name, tooltip) => {
} else { } else {
zyysCenter.length = 0; zyysCenter.length = 0;
zyysDk.length = 0; zyysDk.length = 0;
await get_dk_zyys(polygon.fgfwrs,polygon.startAge,polygon.endAge); await get_dk_zyys(polygon.fgfwrs, polygon.startAge, polygon.endAge);
xr_dk_center_zyys(); xr_dk_center_zyys();
} }
@ -2955,7 +3003,7 @@ const loadCs_zyys = async (name) => {
} }
} }
}; };
const get_dk_zyys = async (sj,start,end) => { const get_dk_zyys = async (sj, start, end) => {
zyys_dk.value.length = 0; zyys_dk.value.length = 0;
zyys_center.value.length = 0; zyys_center.value.length = 0;
zyys_data.value.point.length = 0; zyys_data.value.point.length = 0;
@ -2977,7 +3025,14 @@ const get_dk_zyys = async (sj,start,end) => {
}); });
zyysCenter.forEach((center) => { zyysCenter.forEach((center) => {
if (item.committee == center.name) { 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); 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) => { const Xr_zyysNum = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
@ -3072,19 +3133,20 @@ const Xr_zyysNum = (polygon, indexx) => {
zyys_center.value[indexx].addEventListener("click", () => { zyys_center.value[indexx].addEventListener("click", () => {
console.log(polygon); console.log(polygon);
// cfCsZs.value = polygon.name; // 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) => { const open_detail_zyys = () => {
let age = "";
dialogShow.value = true; dialogShow.value = true;
http http
.get( .get(
`/api/ggfwyth/ysyzt/getRyJbxxList?page=${pagination.currentPage}&size=${ `/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}`
pagination.pageSize
}&committee=${committee}&town=${
town
}&startAge=${start}&endAge=${end}`
) )
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
@ -3167,6 +3229,8 @@ const to_jd = async (item_name) => {
}; };
// //
const open_detail = () => { const open_detail = () => {
tableType.type = true;
tableType.columns = table_column_list.sxt;
let age = ""; let age = "";
let tagId; let tagId;
if (choose.value.person == "9999") { if (choose.value.person == "9999") {
@ -3222,37 +3286,29 @@ const onsxt = () => {
// //
const handlePagination = (current) => { const handlePagination = (current) => {
pagination.currentPage = current; pagination.currentPage = current;
let age = ""; if (tableType.type) {
let tagId; let age = "";
if (choose.value.person == "9999") { let tagId;
age = ""; if (choose.value.person == "9999") {
person_detail(age); age = "";
} else if (choose.value.person == "6666") { person_detail(age);
age = ""; } else if (choose.value.person == "6666") {
person_detail2(); age = "";
} else if ( person_detail2();
// choose.value.person == "" || } else if (tsbq_pp.value.includes(choose.value.person)) {
// choose.value.person == "" || age = "";
// choose.value.person == "" || tsbq_id_total.value.forEach((item, index) => {
// choose.value.person == "" || if (choose.value.person == item.name) {
// choose.value.person == "尿" || tagId = item.tagId;
// choose.value.person == "退" || }
// choose.value.person == "" || });
// choose.value.person == "" || person_detail(age, tagId);
// choose.value.person == "" || } else {
// choose.value.person == "" age = choose.value.person;
tsbq_pp.value.includes(choose.value.person) person_detail(age);
) { }
age = "";
tsbq_id_total.value.forEach((item, index) => {
if (choose.value.person == item.name) {
tagId = item.tagId;
}
});
person_detail(age, tagId);
} else { } else {
age = choose.value.person; open_detail_zyys();
person_detail(age);
} }
}; };

View File

@ -12,6 +12,7 @@
:list="data.jsbgl" :list="data.jsbgl"
v-if="showEchart" v-if="showEchart"
style="width: 95%; margin-top: 10px" style="width: 95%; margin-top: 10px"
@shuju="jsSj"
></eP3> ></eP3>
</div> </div>
<div class="flex1"> <div class="flex1">
@ -33,10 +34,7 @@
{{ item }} {{ item }}
</div> </div>
</div> </div>
<eP2 <eP2 :list="data.wfjw.list"></eP2>
:list="data.medicalInsurance.ffrc"
:year="data.medicalInsurance.year"
></eP2>
</div> </div>
</div> </div>
</div> </div>
@ -50,13 +48,13 @@
</div> </div>
<div class="shang"> <div class="shang">
<div class="shang_item"> <div class="shang_item">
<div class="title">物业小区</div> <div class="title" @click="openTable('物业小区')">物业小区</div>
<div class="i"> <div class="i">
<zwfw1 :list="data.fgl.list1" v-if="showEchart" /> <zwfw1 :list="data.fgl.list1" v-if="showEchart" />
</div> </div>
</div> </div>
<div class="shang_item"> <div class="shang_item">
<div class="title">专业物业</div> <div class="title" @click="openTable('专业物业')">专业物业</div>
<div class="i"> <div class="i">
<zwfw2 :list="data.fgl.list2" v-if="showEchart" /> <zwfw2 :list="data.fgl.list2" v-if="showEchart" />
</div> </div>
@ -64,7 +62,7 @@
</div> </div>
</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="yd_title center_2">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -74,14 +72,26 @@
<div class="wlsq"> <div class="wlsq">
<el-table <el-table
:data="data.tableData1" :data="data.tableData1"
style="width: 100%; height: 500px" style="width: 100%; height: 550px"
class="table_border" class="table_border"
:row-style="rowState" :row-style="rowState"
:header-cell-style="tableHeaderColor" :header-cell-style="tableHeaderColor"
> >
<el-table-column prop="name" label="社区名称" show-overflow-tooltip/> <el-table-column
<el-table-column prop="address" label="社区位置" show-overflow-tooltip/> prop="name"
<el-table-column prop="text" label="社区材料" show-overflow-tooltip/> label="社区名称"
show-overflow-tooltip
/>
<el-table-column
prop="address"
label="社区位置"
show-overflow-tooltip
/>
<el-table-column
prop="text"
label="社区材料"
show-overflow-tooltip
/>
</el-table> </el-table>
</div> </div>
</div> </div>
@ -121,25 +131,66 @@
</div> </div>
<el-table <el-table
:data="data.tableData2" :data="data.tableData2"
style="width: 100%; height: 500px" style="width: 100%; height: 480px"
class="table_border" class="table_border"
:row-style="rowState" :row-style="rowState"
:header-cell-style="tableHeaderColor" :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
<el-table-column prop="address" label="地点" width="132" show-overflow-tooltip/> prop="endtime"
<el-table-column prop="title" label="名称" width="132" show-overflow-tooltip/> label="结束时间"
<el-table-column prop="finish" label="详情" width="120"> 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"> <template #default="scope">
<div>查看详情</div> <div @click="goDetail(scope.row)">查看详情</div>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </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> </div>
</template> </template>
@ -152,8 +203,13 @@ import eP4 from "../echarts_jz/eP4.vue";
import http from "@/utils/request.js"; import http from "@/utils/request.js";
import zwfw1 from "../echarts_jz/zwfw1.vue"; import zwfw1 from "../echarts_jz/zwfw1.vue";
import zwfw2 from "../echarts_jz/zwfw2.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({ const data = reactive({
medicalInsurance: {}, wfjw: {
list: [],
},
fgl: { fgl: {
list1: { list1: {
finish: 60, finish: 60,
@ -231,7 +287,34 @@ const data = reactive({
chooselist: ["城镇", "农村"], chooselist: ["城镇", "农村"],
choose: "城镇", 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) => { const tableHeaderColor = (arg) => {
return { 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 showEchart = ref(false);
const chooseWfjw=(val)=>{ 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 () => { const getData = async () => {
showEchart.value = true; showEchart.value = true;
data.wfjw.list = wfjwsj_cz;
// await http.get("/api/ggfwyth/health").then((res) => { // await http.get("/api/ggfwyth/health").then((res) => {
// if (res.code == 200) { // if (res.code == 200) {
// data.medicalInsurance = res.data.medicalInsurance; // data.medicalInsurance = res.data.medicalInsurance;
@ -520,7 +687,7 @@ onMounted(() => {});
// //
.wfjw { .wfjw {
width: 95%; width: 95%;
margin-top: 10px; margin-top: 20px;
.wfjw_choose { .wfjw_choose {
display: flex; display: flex;
align-items: center; align-items: center;
@ -551,7 +718,7 @@ onMounted(() => {});
} }
// //
.shang { .shang {
margin-top: 20px; margin-top: 40px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
&_item { &_item {
@ -570,10 +737,13 @@ onMounted(() => {});
color: #ffffff; color: #ffffff;
line-height: 20px; line-height: 20px;
letter-spacing: 2px; letter-spacing: 2px;
z-index: 5;
cursor: pointer;
} }
.i { .i {
width: 100%; margin-top: -20px;
height: 200px; width: 90%;
height: 300px;
} }
} }
} }
@ -595,7 +765,9 @@ onMounted(() => {});
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.zzgc_item_title { .zzgc_item_title {
margin-top: 20px; position: relative;
margin: 10px 0;
padding: 10px;
font-family: PingFangSC, PingFang SC; font-family: PingFangSC, PingFang SC;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
@ -609,6 +781,16 @@ onMounted(() => {});
rgba(255, 255, 255, 0) 100% 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; border: 1px solid #7aceff;
} }
</style> </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>