住有所居
This commit is contained in:
parent
64c2a97c4c
commit
f4739af199
|
|
@ -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) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
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) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
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) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
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>
|
||||||
|
|
||||||
|
|
@ -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}}`;
|
|
||||||
},
|
},
|
||||||
// 富文本样式
|
formatter: "{b}:{c}" + "个\n\n",
|
||||||
rich: {
|
borderWidth: 20,
|
||||||
// a样式
|
borderRadius: 4,
|
||||||
a: {
|
padding: [0, -100],
|
||||||
// 内边距
|
|
||||||
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: {
|
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);
|
||||||
|
|
|
||||||
|
|
@ -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, //判断分页执行为那个方法，true为人口标签，false为资源要素
|
||||||
|
});
|
||||||
|
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,6 +3286,7 @@ const onsxt = () => {
|
||||||
//表格分页
|
//表格分页
|
||||||
const handlePagination = (current) => {
|
const handlePagination = (current) => {
|
||||||
pagination.currentPage = current;
|
pagination.currentPage = current;
|
||||||
|
if (tableType.type) {
|
||||||
let age = "";
|
let age = "";
|
||||||
let tagId;
|
let tagId;
|
||||||
if (choose.value.person == "9999") {
|
if (choose.value.person == "9999") {
|
||||||
|
|
@ -3230,19 +3295,7 @@ const handlePagination = (current) => {
|
||||||
} else if (choose.value.person == "6666") {
|
} else if (choose.value.person == "6666") {
|
||||||
age = "";
|
age = "";
|
||||||
person_detail2();
|
person_detail2();
|
||||||
} else if (
|
} else if (tsbq_pp.value.includes(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 == "特困" ||
|
|
||||||
// choose.value.person == "精神病人"
|
|
||||||
tsbq_pp.value.includes(choose.value.person)
|
|
||||||
) {
|
|
||||||
age = "";
|
age = "";
|
||||||
tsbq_id_total.value.forEach((item, index) => {
|
tsbq_id_total.value.forEach((item, index) => {
|
||||||
if (choose.value.person == item.name) {
|
if (choose.value.person == item.name) {
|
||||||
|
|
@ -3254,6 +3307,9 @@ const handlePagination = (current) => {
|
||||||
age = choose.value.person;
|
age = choose.value.person;
|
||||||
person_detail(age);
|
person_detail(age);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
open_detail_zyys();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 打开摄像头
|
// 打开摄像头
|
||||||
|
|
|
||||||
|
|
@ -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="结束时间"
|
||||||
|
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">
|
<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>
|
||||||
Loading…
Reference in New Issue