Compare commits
2 Commits
ee96424f17
...
9a7923953e
| Author | SHA1 | Date |
|---|---|---|
 姚宇浩
|
9a7923953e | |
|
姚宇浩
|
be90156370 |
|
|
@ -2,7 +2,7 @@ import axios from "axios";
|
|||
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 拦截器
|
||||
|
|
|
|||
|
|
@ -1,296 +1,297 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 180px"></div>
|
||||
</template>
|
||||
<div ref="chart" style="width: 100%; height: 180px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return {};
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, onBeforeMount, onBeforeUnmount,watch } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: String,
|
||||
default: () => {
|
||||
return '';
|
||||
},
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
option: {},
|
||||
dataValue: 86,
|
||||
});
|
||||
let angle = 0; // 角度
|
||||
const chart = ref(); // 创建DOM引用
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
title: {
|
||||
text: `{v|${data.dataValue}}{unit|%}`,
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
rich: {
|
||||
v: {
|
||||
fontSize: 25,
|
||||
color: "#fff",
|
||||
},
|
||||
unit: {
|
||||
fontSize: 25,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
option: {},
|
||||
});
|
||||
let angle = 0; // 角度
|
||||
let dataValue = 86;
|
||||
const chart = ref(); // 创建DOM引用
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
title: {
|
||||
text: `{v|${dataValue}}{unit|%}`,
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
rich: {
|
||||
v: {
|
||||
fontSize: 25,
|
||||
color: "#fff",
|
||||
series: [
|
||||
/** 绘制内部圆弧-1 <right-top> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.92,
|
||||
startAngle: ((270 + angle) * Math.PI) / 180,
|
||||
endAngle: ((360 + angle) * Math.PI) / 180,
|
||||
},
|
||||
unit: {
|
||||
fontSize: 25,
|
||||
color: "#fff",
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00E0DB",
|
||||
lineWidth: 2,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制内部圆弧-2 <left-bottom> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.92,
|
||||
startAngle: ((90 + angle) * Math.PI) / 180,
|
||||
endAngle: ((180 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00E0DB",
|
||||
lineWidth: 2,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制外部圆弧-1 <right-bottom> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98,
|
||||
startAngle: ((355 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((120 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00E0DB",
|
||||
lineWidth: 2.6,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制外部圆弧-2 <left-top> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98,
|
||||
startAngle: ((175 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((300 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00E0DB",
|
||||
lineWidth: 2.6,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制外部圆弧-1-开始圆点 <right-bottom> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
let x0 = api.getWidth() / 2;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98;
|
||||
return {
|
||||
type: "circle",
|
||||
shape: {
|
||||
/** 角度355° 外弧1开始角度 */
|
||||
cx: x0 + r * Math.cos(((355 + -angle) * Math.PI) / 180),
|
||||
cy: y0 + r * Math.sin(((355 + -angle) * Math.PI) / 180),
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
fill: "#00E0DB",
|
||||
stroke: "#00E0DB",
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制外部圆弧-2-开始圆点 <left-top> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
let x0 = api.getWidth() / 2;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98;
|
||||
return {
|
||||
type: "circle",
|
||||
shape: {
|
||||
/** 角度175° 外弧2开始角度 */
|
||||
cx: x0 + r * Math.cos(((175 + -angle) * Math.PI) / 180),
|
||||
cy: y0 + r * Math.sin(((175 + -angle) * Math.PI) / 180),
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
fill: "#00E0DB",
|
||||
stroke: "#00E0DB",
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 内心圆 */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "circle",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.38,
|
||||
startAngle: ((175 + angle) * Math.PI) / 180,
|
||||
endAngle: ((300 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00374C80",
|
||||
lineWidth: 2.6,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 饼图 */
|
||||
{
|
||||
name: "已完成",
|
||||
type: "pie",
|
||||
startAngle: 90,
|
||||
z: 0,
|
||||
label: {
|
||||
position: "center",
|
||||
},
|
||||
radius: ["86%", "64%"],
|
||||
silent: true,
|
||||
animation: false, // 关闭饼图动画
|
||||
data: [
|
||||
{
|
||||
value: data.dataValue,
|
||||
itemStyle: {
|
||||
color: "RGBA(0, 225, 248, 1)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "未完成",
|
||||
value: 100 - data.dataValue,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#003E7A",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
/** 饼图上刻度 */
|
||||
{
|
||||
type: "gauge",
|
||||
center: ["50%", "50%"],
|
||||
radius: "110%", // 错位调整此处
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
splitNumber: 8,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
// length: 39,
|
||||
length: "25%",
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: "#002837", // 不动
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
/** 绘制内部圆弧-1 <right-top> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.92,
|
||||
startAngle: ((270 + angle) * Math.PI) / 180,
|
||||
endAngle: ((360 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00E0DB",
|
||||
lineWidth: 2,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制内部圆弧-2 <left-bottom> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.92,
|
||||
startAngle: ((90 + angle) * Math.PI) / 180,
|
||||
endAngle: ((180 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00E0DB",
|
||||
lineWidth: 2,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制外部圆弧-1 <right-bottom> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98,
|
||||
startAngle: ((355 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((120 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00E0DB",
|
||||
lineWidth: 2.6,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制外部圆弧-2 <left-top> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "arc",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98,
|
||||
startAngle: ((175 + -angle) * Math.PI) / 180,
|
||||
endAngle: ((300 + -angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00E0DB",
|
||||
lineWidth: 2.6,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制外部圆弧-1-开始圆点 <right-bottom> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
let x0 = api.getWidth() / 2;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98;
|
||||
return {
|
||||
type: "circle",
|
||||
shape: {
|
||||
/** 角度355° 外弧1开始角度 */
|
||||
cx: x0 + r * Math.cos(((355 + -angle) * Math.PI) / 180),
|
||||
cy: y0 + r * Math.sin(((355 + -angle) * Math.PI) / 180),
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
fill: "#00E0DB",
|
||||
stroke: "#00E0DB",
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 绘制外部圆弧-2-开始圆点 <left-top> */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
let x0 = api.getWidth() / 2;
|
||||
let y0 = api.getHeight() / 2;
|
||||
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.98;
|
||||
return {
|
||||
type: "circle",
|
||||
shape: {
|
||||
/** 角度175° 外弧2开始角度 */
|
||||
cx: x0 + r * Math.cos(((175 + -angle) * Math.PI) / 180),
|
||||
cy: y0 + r * Math.sin(((175 + -angle) * Math.PI) / 180),
|
||||
r: 4,
|
||||
},
|
||||
style: {
|
||||
fill: "#00E0DB",
|
||||
stroke: "#00E0DB",
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 内心圆 */
|
||||
{
|
||||
type: "custom",
|
||||
coordinateSystem: "none",
|
||||
renderItem: (params, api) => {
|
||||
return {
|
||||
type: "circle",
|
||||
shape: {
|
||||
cx: api.getWidth() / 2,
|
||||
cy: api.getHeight() / 2,
|
||||
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.38,
|
||||
startAngle: ((175 + angle) * Math.PI) / 180,
|
||||
endAngle: ((300 + angle) * Math.PI) / 180,
|
||||
},
|
||||
style: {
|
||||
fill: "transparent",
|
||||
stroke: "#00374C80",
|
||||
lineWidth: 2.6,
|
||||
},
|
||||
silent: true,
|
||||
};
|
||||
},
|
||||
data: [0],
|
||||
},
|
||||
/** 饼图 */
|
||||
{
|
||||
name: "已完成",
|
||||
type: "pie",
|
||||
startAngle: 90,
|
||||
z: 0,
|
||||
label: {
|
||||
position: "center",
|
||||
},
|
||||
radius: ["86%", "64%"],
|
||||
silent: true,
|
||||
animation: false, // 关闭饼图动画
|
||||
data: [
|
||||
{
|
||||
value: dataValue,
|
||||
itemStyle: {
|
||||
color: "RGBA(0, 225, 248, 1)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "未完成",
|
||||
value: 100 - dataValue,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#003E7A",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
/** 饼图上刻度 */
|
||||
{
|
||||
type: "gauge",
|
||||
center: ["50%", "50%"],
|
||||
radius: "110%", // 错位调整此处
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
splitNumber: 8,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
// length: 39,
|
||||
length: "25%",
|
||||
lineStyle: {
|
||||
width: 5,
|
||||
color: "#002837", // 不动
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
],
|
||||
};
|
||||
var time;
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
time = setInterval(() => {
|
||||
angle = angle + 2;
|
||||
myChart.setOption(data.option, true);
|
||||
}, 100);
|
||||
};
|
||||
onBeforeUnmount(() => {
|
||||
if (time) {
|
||||
clearInterval(time);
|
||||
}
|
||||
});
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
};
|
||||
var time;
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
time = setInterval(() => {
|
||||
angle = angle + 2;
|
||||
myChart.setOption(data.option, true);
|
||||
}, 100);
|
||||
};
|
||||
onBeforeUnmount(() => {
|
||||
if (time) {
|
||||
clearInterval(time);
|
||||
}
|
||||
});
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.dataValue=props.list;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -3,7 +3,14 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, onBeforeMount, defineProps,watch } from "vue";
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
defineProps,
|
||||
watch,
|
||||
} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
|
|
@ -19,35 +26,27 @@ const data = reactive({
|
|||
//职称结构取数
|
||||
|
||||
var rich = {
|
||||
name: {
|
||||
color: "#666666",
|
||||
fontSize: 14,
|
||||
padding: [8, 30, 0, 30],
|
||||
fontWeight: "400",
|
||||
align: "left",
|
||||
white: {
|
||||
color: "#65FDFD",
|
||||
align: "center",
|
||||
fontSize: 18,
|
||||
// padding: [21, 0],
|
||||
},
|
||||
value: {
|
||||
color: "#333",
|
||||
fontSize: 15,
|
||||
padding: [0, 30, 8, 30],
|
||||
fontWeight: "500",
|
||||
align: "left",
|
||||
yellow: {
|
||||
color: "#ffc20e",
|
||||
fontSize: 18,
|
||||
padding: [5, 4],
|
||||
align: "center",
|
||||
},
|
||||
percent: {
|
||||
color: "#FFF",
|
||||
align: "right",
|
||||
fontSize: 15,
|
||||
fontWeight: "500",
|
||||
//padding: [0, 5]
|
||||
total: {
|
||||
color: "#ffc20e",
|
||||
fontSize: 18,
|
||||
align: "center",
|
||||
},
|
||||
hr: {
|
||||
borderColor: "#DFDFDF",
|
||||
width: "100%",
|
||||
borderWidth: 1,
|
||||
height: 0,
|
||||
},
|
||||
cir: {
|
||||
fontSize: 26,
|
||||
blue: {
|
||||
color: "#49dff0",
|
||||
fontSize: 16,
|
||||
align: "center",
|
||||
},
|
||||
};
|
||||
var colorList = ["#3BAEFF", "#41EDD5", "#FFC371", "#797AFF"];
|
||||
|
|
@ -95,10 +94,15 @@ const getOption = () => {
|
|||
color: "white", // 改变标示文字的颜色
|
||||
fontSize: 18, //文字大小
|
||||
},
|
||||
formatter: "{b}:{c}" + "个\n\n",
|
||||
borderWidth: 20,
|
||||
borderRadius: 4,
|
||||
padding: [0, -100],
|
||||
normal: {
|
||||
formatter: function (param) {
|
||||
return "{white|" + param.name + "}\n{yellow|" + param.value + "}";
|
||||
},
|
||||
borderWidth: 20,
|
||||
borderRadius: 4,
|
||||
padding: [0, -50],
|
||||
rich: rich,
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
|
|
@ -151,14 +155,17 @@ const setChart = () => {
|
|||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
watch(()=>props.list,()=>{
|
||||
data.list=props.list
|
||||
getOption();
|
||||
setChart();
|
||||
})
|
||||
watch(
|
||||
() => props.list,
|
||||
() => {
|
||||
data.list = props.list;
|
||||
getOption();
|
||||
setChart();
|
||||
}
|
||||
);
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list=props.list
|
||||
data.list = props.list;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,25 @@ import { onMounted, onBeforeMount, reactive, ref } from "vue";
|
|||
import * as echarts from "echarts";
|
||||
const emit = defineEmits(["shuju"]);
|
||||
const props = defineProps({
|
||||
list: {
|
||||
list1: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
list2: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
list3: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
|
|
@ -43,13 +61,11 @@ const colors = [
|
|||
];
|
||||
// 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],
|
||||
valueList3: [1181, 2177, 3720, 3711, 4642, 1654, 3395, 5552],
|
||||
xxname: ["1月", "2月", "3月", "4月","5月"],
|
||||
year: [],
|
||||
});
|
||||
// 注册5个面图形:左侧、前面、右面、上面、下面
|
||||
//c0:左下角，c1：右下角,c2:右上角，c3：左上角
|
||||
|
|
@ -403,7 +419,7 @@ const getOption = () => {
|
|||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: data.xxname,
|
||||
data: data.year,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -417,13 +433,13 @@ const getOption = () => {
|
|||
color: "#fff",
|
||||
fontSize: 16,
|
||||
formatter: function (value) {
|
||||
return value.length > 3 ? value.slice(0, 2) + "..." : value;
|
||||
return value.length > 4 ? value.slice(0, 3) + "..." : value;
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
data: data.xxname,
|
||||
data: data.year,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -441,7 +457,7 @@ const getOption = () => {
|
|||
],
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: data.Max,
|
||||
|
||||
// interval: 100,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
|
|
@ -756,31 +772,12 @@ const setChart = () => {
|
|||
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;
|
||||
}
|
||||
});
|
||||
});
|
||||
data.year=props.year;
|
||||
data.valueList=props.list1;
|
||||
data.valueList2=props.list2;
|
||||
data.valueList3=props.list3;
|
||||
getOption();
|
||||
setChart();
|
||||
}, 800);
|
||||
|
|
|
|||
|
|
@ -8,22 +8,22 @@
|
|||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
type: String,
|
||||
default: () => {
|
||||
return {};
|
||||
return '';
|
||||
},
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
option: {},
|
||||
dataValue: 0,
|
||||
});
|
||||
let angle = 0; // 角度
|
||||
let dataValue = 86;
|
||||
const chart = ref(); // 创建DOM引用
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
title: {
|
||||
text: `{v|${dataValue}}{unit|%}`,
|
||||
text: `{v|${data.dataValue}}{unit|次}`,
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
|
|
@ -224,14 +224,14 @@
|
|||
animation: false, // 关闭饼图动画
|
||||
data: [
|
||||
{
|
||||
value: dataValue,
|
||||
value: data.dataValue,
|
||||
itemStyle: {
|
||||
color: "RGBA(0, 139, 255, 1)",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "未完成",
|
||||
value: 100 - dataValue,
|
||||
value: 100 - data.dataValue,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -287,6 +287,7 @@
|
|||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.dataValue=props.list
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
|
|
|
|||
|
|
@ -40,34 +40,6 @@ const data1 = ref([
|
|||
|
||||
const getOption = () => {
|
||||
data.option = {
|
||||
// legend: {
|
||||
// selectedMode: false,
|
||||
// itemWidth: 10,
|
||||
// itemHeight: 10,
|
||||
// itemGap: 10,
|
||||
// icon: "circle",
|
||||
// data: ["2.0收件数", "", "总收件数"],
|
||||
// bottom: "3%",
|
||||
// width: 380,
|
||||
// textStyle: {
|
||||
// color: "#ffffff", // 修改图例颜色为红色
|
||||
// },
|
||||
// formatter: function (params) {
|
||||
// var num = "";
|
||||
// for (let i = 0; i < data.dataList.length; i++) {
|
||||
// if (data.dataList[i].name == params) {
|
||||
// num = data.dataList[i].value;
|
||||
// }
|
||||
// }
|
||||
// if(params == "总收件数"){
|
||||
// return params + " " +num;
|
||||
// }else{
|
||||
// return params + " " +num;
|
||||
// }
|
||||
|
||||
// },
|
||||
// },
|
||||
|
||||
title: [
|
||||
{
|
||||
text: `${data.percent}%`,
|
||||
|
|
|
|||
|
|
@ -98,8 +98,11 @@
|
|||
<div
|
||||
class="content_item"
|
||||
v-for="(item, index) in tsbqTotal"
|
||||
:class="{ choose: item.id == choose.person }"
|
||||
@click="buten2(item)"
|
||||
:class="{
|
||||
choose: item.id == choose.person,
|
||||
Tsactive: !item.click,
|
||||
}"
|
||||
@click="item.click ? buten2(item) : ''"
|
||||
:key="index"
|
||||
>
|
||||
<div class="content_item_name">{{ item.name }}</div>
|
||||
|
|
@ -120,8 +123,9 @@
|
|||
:class="{
|
||||
choose: yaosuList.includes(item.name),
|
||||
wz: item.wz == true,
|
||||
Tsactive: !item.click,
|
||||
}"
|
||||
@click="changeys(item.name)"
|
||||
@click="item.click ? changeys(item.name) : ''"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.img" class="zyys_content_item_left" />
|
||||
|
|
@ -779,6 +783,13 @@ const PopulationRatio = ref([
|
|||
]);
|
||||
//特殊标签左侧数据
|
||||
const tsbqTotal = ref([]);
|
||||
const lingshibiaoqian = reactive([
|
||||
{
|
||||
id: "临时标签",
|
||||
name: "临时标签",
|
||||
tagId: "555",
|
||||
},
|
||||
]);
|
||||
const data = reactive({
|
||||
serviceCircleList: [],
|
||||
fwqCoordinates: [], //服务圈经度
|
||||
|
|
@ -817,8 +828,8 @@ const yaosuTotal = ref([
|
|||
name: "体育场所",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: true,
|
||||
},
|
||||
|
||||
{
|
||||
id: 1,
|
||||
name: "幼儿园",
|
||||
|
|
@ -827,6 +838,7 @@ const yaosuTotal = ref([
|
|||
wz: false,
|
||||
tooltip: "zyysmc",
|
||||
url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=幼儿园",
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
|
|
@ -836,6 +848,7 @@ const yaosuTotal = ref([
|
|||
wz: false,
|
||||
tooltip: "zyysmc",
|
||||
url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=小学",
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
|
|
@ -845,6 +858,7 @@ const yaosuTotal = ref([
|
|||
wz: false,
|
||||
tooltip: "zyysmc",
|
||||
url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=初中",
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
|
|
@ -854,6 +868,7 @@ const yaosuTotal = ref([
|
|||
wz: false,
|
||||
tooltip: "zyysmc",
|
||||
url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=高中",
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
|
|
@ -863,12 +878,14 @@ const yaosuTotal = ref([
|
|||
wz: false,
|
||||
tooltip: "zyysmc",
|
||||
url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=医院",
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "南孔书院",
|
||||
img: j6,
|
||||
wz: false,
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
|
|
@ -877,12 +894,14 @@ const yaosuTotal = ref([
|
|||
img_map: j7_map,
|
||||
wz: false,
|
||||
tooltip: "name",
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "汽车充电桩",
|
||||
img: j8,
|
||||
wz: true,
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
|
|
@ -892,6 +911,7 @@ const yaosuTotal = ref([
|
|||
wz: true,
|
||||
tooltip: "zyysmc",
|
||||
url: "/api/ggfwyth/ysyzt/getZyys?zyyslx=卫生服务中心",
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
|
|
@ -901,15 +921,133 @@ const yaosuTotal = ref([
|
|||
wz: true,
|
||||
url: "/api/ggfwyth/ysyzt/getAeds",
|
||||
tooltip: "siteAddress",
|
||||
click: true,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "摄像头",
|
||||
img: j11,
|
||||
img_map: j11_map,
|
||||
wz: false,
|
||||
wz: true,
|
||||
url: "/api/ggfwyth/ysyzt/getJashsxt",
|
||||
tooltip: "sbmc",
|
||||
click: true,
|
||||
},
|
||||
|
||||
{
|
||||
id: 25,
|
||||
name: "菜市场",
|
||||
img: j0,
|
||||
wz: true,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
name: "停车场",
|
||||
img: j0,
|
||||
wz: true,
|
||||
click: false,
|
||||
},
|
||||
|
||||
{
|
||||
id: 21,
|
||||
name: "党群服务中心",
|
||||
img: j0,
|
||||
wz: true,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
name: "残疾人之家",
|
||||
img: j0,
|
||||
wz: true,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
name: "百姓健身房",
|
||||
img: j0,
|
||||
wz: true,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
name: "绿色跑道",
|
||||
img: j0,
|
||||
wz: true,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
name: "便民服务中心",
|
||||
img: j0,
|
||||
wz: true,
|
||||
click: false,
|
||||
},
|
||||
|
||||
{
|
||||
id: 27,
|
||||
name: "老年活动室",
|
||||
img: j0,
|
||||
wz: true,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
name: "篮球场",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
name: "足球场",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
name: "文化广场",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: false,
|
||||
},
|
||||
|
||||
{
|
||||
id: 32,
|
||||
name: "公厕",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 33,
|
||||
name: "文化礼堂",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 34,
|
||||
name: "农家书屋",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: "助餐点",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: false,
|
||||
},
|
||||
{
|
||||
id: 35,
|
||||
name: "乡贤馆",
|
||||
img: j0,
|
||||
wz: false,
|
||||
click: false,
|
||||
},
|
||||
]);
|
||||
//选中的资源要素
|
||||
|
|
@ -1180,8 +1318,7 @@ const getCssj = async () => {
|
|||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
cssj = JSON.parse(res.data);
|
||||
console.log(1111111111,cssj);
|
||||
|
||||
console.log(1111111111, cssj);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -2493,6 +2630,7 @@ const getDataBq = async (jd, cs) => {
|
|||
name: itemm.bq,
|
||||
rksl: itemm.rs || 0,
|
||||
tagId: itemm.tagId,
|
||||
click: true,
|
||||
});
|
||||
b = 1;
|
||||
}
|
||||
|
|
@ -2503,9 +2641,20 @@ const getDataBq = async (jd, cs) => {
|
|||
name: item.name,
|
||||
rksl: 0,
|
||||
tagId: item.tagId,
|
||||
click: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
//添加临时标签
|
||||
lingshibiaoqian.forEach((item, index) => {
|
||||
tsbqTotal.value.push({
|
||||
id: item.name,
|
||||
name: item.name,
|
||||
rksl: 0,
|
||||
tagId: item.tagId,
|
||||
click: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -2527,6 +2676,17 @@ const getDataBqFirst = async () => {
|
|||
name: item.bq,
|
||||
rksl: item.rs || 0,
|
||||
tagId: item.tagId,
|
||||
click: true,
|
||||
});
|
||||
});
|
||||
//添加临时标签
|
||||
lingshibiaoqian.forEach((item, index) => {
|
||||
tsbqTotal.value.push({
|
||||
id: item.name,
|
||||
name: item.name,
|
||||
rksl: 0,
|
||||
tagId: item.tagId,
|
||||
click: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -2777,9 +2937,12 @@ const zyys_choose_cs = ref("");
|
|||
const changeys = (name) => {
|
||||
if (yaosuList.value.includes(name)) {
|
||||
yaosuList.value = yaosuList.value.filter((ch) => ch !== name);
|
||||
yaosuIcon.value[name].sj.forEach((item, index) => {
|
||||
map.removeOverlay(yaosuIcon.value[name].sj[index].overlay);
|
||||
});
|
||||
if (yaosuIcon.value[name]) {
|
||||
yaosuIcon.value[name].sj.forEach((item, index) => {
|
||||
map.removeOverlay(yaosuIcon.value[name].sj[index].overlay);
|
||||
});
|
||||
}
|
||||
|
||||
if (name == zyys_choose_cs.value) {
|
||||
zyys_dk.value.forEach((item, index) => {
|
||||
map.removeOverlay(item);
|
||||
|
|
@ -2818,9 +2981,10 @@ const changeys = (name) => {
|
|||
name == "卫生服务中心"
|
||||
) {
|
||||
getZyys(url, name, img, img_map, tooltip);
|
||||
}
|
||||
if (name == "养老机构") {
|
||||
} else if (name == "养老机构") {
|
||||
getZyys2(name, img, img_map, tooltip);
|
||||
} else {
|
||||
loadingss.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -3000,7 +3164,7 @@ const loadCs_zyys = async (jdname) => {
|
|||
zyysCenter.push({
|
||||
id: v.id,
|
||||
name: v.properties.name,
|
||||
jdname:jdname,
|
||||
jdname: jdname,
|
||||
center: v.properties.center,
|
||||
});
|
||||
}
|
||||
|
|
@ -3020,57 +3184,11 @@ const get_dk_zyys = async (sj, xd, ssly) => {
|
|||
zyys_jd.forEach((item) => {
|
||||
loadCs_zyys(item);
|
||||
});
|
||||
zyysDk.forEach((dk) => {
|
||||
let pdK = true; //判断sj有没有对应地块，没有就赋值0
|
||||
sj.forEach((item, index) => {
|
||||
if (item.committee == dk.name) {
|
||||
pdK = false;
|
||||
let a = {
|
||||
...dk,
|
||||
zt: item.zt,
|
||||
};
|
||||
zyys_data.value.point.push(a);
|
||||
}
|
||||
});
|
||||
if (pdK) {
|
||||
let a = {
|
||||
...dk,
|
||||
zt: 0,
|
||||
};
|
||||
zyys_data.value.point.push(a);
|
||||
}
|
||||
});
|
||||
zyysCenter.forEach((center) => {
|
||||
let pdK = true; //判断sj有没有对应地块，没有就赋值0
|
||||
sj.forEach((item, index) => {
|
||||
if (item.committee == center.name) {
|
||||
pdK = false;
|
||||
let b = {
|
||||
...center,
|
||||
num: item.num,
|
||||
town: item.town,
|
||||
committee: item.committee,
|
||||
ssly: ssly,
|
||||
xd: xd,
|
||||
};
|
||||
zyys_data.value.center.push(b);
|
||||
}
|
||||
});
|
||||
if (pdK) {
|
||||
let b = {
|
||||
...center,
|
||||
num: 0,
|
||||
town: center.jdname,
|
||||
committee: center.name,
|
||||
ssly: ssly,
|
||||
xd: xd,
|
||||
};
|
||||
zyys_data.value.center.push(b);
|
||||
}
|
||||
});
|
||||
// sj.forEach((item, index) => {
|
||||
// zyysDk.forEach((dk) => {
|
||||
// zyysDk.forEach((dk) => {
|
||||
// let pdK = true; //判断sj有没有对应地块，没有就赋值0
|
||||
// sj.forEach((item, index) => {
|
||||
// if (item.committee == dk.name) {
|
||||
// pdK = false;
|
||||
// let a = {
|
||||
// ...dk,
|
||||
// zt: item.zt,
|
||||
|
|
@ -3078,8 +3196,19 @@ const get_dk_zyys = async (sj, xd, ssly) => {
|
|||
// zyys_data.value.point.push(a);
|
||||
// }
|
||||
// });
|
||||
// zyysCenter.forEach((center) => {
|
||||
// if (pdK) {
|
||||
// let a = {
|
||||
// ...dk,
|
||||
// zt: 0,
|
||||
// };
|
||||
// zyys_data.value.point.push(a);
|
||||
// }
|
||||
// });
|
||||
// zyysCenter.forEach((center) => {
|
||||
// let pdK = true; //判断sj有没有对应地块，没有就赋值0
|
||||
// sj.forEach((item, index) => {
|
||||
// if (item.committee == center.name) {
|
||||
// pdK = false;
|
||||
// let b = {
|
||||
// ...center,
|
||||
// num: item.num,
|
||||
|
|
@ -3091,7 +3220,42 @@ const get_dk_zyys = async (sj, xd, ssly) => {
|
|||
// zyys_data.value.center.push(b);
|
||||
// }
|
||||
// });
|
||||
// if (pdK) {
|
||||
// let b = {
|
||||
// ...center,
|
||||
// num: '',
|
||||
// town: center.jdname,
|
||||
// committee: center.name,
|
||||
// ssly: ssly,
|
||||
// xd: xd,
|
||||
// };
|
||||
// zyys_data.value.center.push(b);
|
||||
// }
|
||||
// });
|
||||
sj.forEach((item, index) => {
|
||||
zyysDk.forEach((dk) => {
|
||||
if (item.committee == dk.name) {
|
||||
let a = {
|
||||
...dk,
|
||||
zt: item.zt,
|
||||
};
|
||||
zyys_data.value.point.push(a);
|
||||
}
|
||||
});
|
||||
zyysCenter.forEach((center) => {
|
||||
if (item.committee == center.name) {
|
||||
let b = {
|
||||
...center,
|
||||
num: item.num,
|
||||
town: item.town,
|
||||
committee: item.committee,
|
||||
ssly: ssly,
|
||||
xd: xd,
|
||||
};
|
||||
zyys_data.value.center.push(b);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
//资源要素(渲染地块)
|
||||
const xr_dk_center_zyys = async () => {
|
||||
|
|
@ -5005,7 +5169,9 @@ onMounted(async () => {
|
|||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.Tsactive {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
// .content_item:last-child {
|
||||
// box-sizing: border-box;
|
||||
// display: flex;
|
||||
|
|
@ -5200,7 +5366,9 @@ onMounted(async () => {
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.Tsactive {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.wz {
|
||||
width: 150px;
|
||||
}
|
||||
|
|
@ -5590,6 +5758,10 @@ onMounted(async () => {
|
|||
.detail {
|
||||
z-index: 998;
|
||||
}
|
||||
//设置无法点击
|
||||
.Tsactive {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
// 分页
|
||||
|
|
|
|||
|
|
@ -9,7 +9,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<eP3
|
||||
:list="data.jsbgl"
|
||||
:list1="data.gzf.fwsl"
|
||||
:list2="data.gzf.rzsl"
|
||||
:list3="data.gzf.bzxzlzf"
|
||||
:year="data.gzf.year"
|
||||
v-if="showEchart"
|
||||
style="width: 95%; margin-top: 10px"
|
||||
@shuju="jsSj"
|
||||
|
|
@ -34,7 +37,7 @@
|
|||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<eP2 :list="data.wfjw.list"></eP2>
|
||||
<eP2 :list="data.wfjw.list" v-if="showEchart"></eP2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,13 +53,13 @@
|
|||
<div class="shang_item">
|
||||
<div class="title" @click="openTable('物业小区')">物业小区</div>
|
||||
<div class="i">
|
||||
<zwfw1 :list="data.fgl.list1" v-if="showEchart" />
|
||||
<zwfw1 :list="data.fgl.wyxqsl" v-if="showEchart" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="shang_item">
|
||||
<div class="title" @click="openTable('专业物业')">专业物业</div>
|
||||
<div class="i">
|
||||
<zwfw2 :list="data.fgl.list2" v-if="showEchart" />
|
||||
<zwfw2 :list="data.fgl.wyfgl" v-if="showEchart" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,24 +74,20 @@
|
|||
</div>
|
||||
<div class="wlsq">
|
||||
<el-table
|
||||
:data="data.tableData1"
|
||||
:data="data.wlsq"
|
||||
style="width: 100%; height: 550px"
|
||||
class="table_border"
|
||||
:row-style="rowState"
|
||||
:header-cell-style="tableHeaderColor"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
prop="sqmc"
|
||||
label="社区名称"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="dz" label="社区位置" show-overflow-tooltip />
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="社区位置"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="text"
|
||||
prop="fgfw"
|
||||
label="社区材料"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
|
@ -107,11 +106,11 @@
|
|||
</div>
|
||||
<div class="zzgc">
|
||||
<div class="zzgc_item">
|
||||
<eP1></eP1>
|
||||
<eP1 :list="data.zzzlts.bjl"></eP1>
|
||||
<div class="zzgc_item_title">按期办结率</div>
|
||||
</div>
|
||||
<div class="zzgc_item">
|
||||
<eP4></eP4>
|
||||
<eP4 :list="data.zzzlts.jccs"></eP4>
|
||||
<div class="zzgc_item_title">专项检查次数</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,44 +126,50 @@
|
|||
<div class="phqgz">
|
||||
<div class="phqgz_title">
|
||||
<img src="@/assets/images/jz/sjx.png" alt="" />
|
||||
<div class="phqgz_title_text">已改造：3300户</div>
|
||||
<div class="phqgz_title_text">已改造：{{ data.phq.ygz }}户</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="data.tableData2"
|
||||
:data="data.phq.phqgzs"
|
||||
style="width: 100%; height: 480px"
|
||||
class="table-style"
|
||||
:row-style="rowState"
|
||||
:header-cell-style="tableHeaderColor"
|
||||
|
||||
>
|
||||
<el-table-column
|
||||
prop="starttime"
|
||||
prop="kgsj"
|
||||
label="开始时间"
|
||||
width="120"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
prop="endtime"
|
||||
prop="jgsj"
|
||||
label="结束时间"
|
||||
width="120"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
prop="xmdz"
|
||||
label="地点"
|
||||
width="132"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
prop="xmmc"
|
||||
label="名称"
|
||||
width="132"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="finish" label="详情" width="120" fixed="right">
|
||||
<el-table-column
|
||||
prop="finish"
|
||||
label="详情"
|
||||
width="120"
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div @click="goDetail(scope.row)" style="cursor: pointer;">查看详情</div>
|
||||
<div @click="goDetail(scope.row)" style="cursor: pointer">
|
||||
查看详情
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -208,85 +213,50 @@ import Dialog from "../dialog/dialog.vue";
|
|||
import DialogEcTy from "../dialog/dialogEcTy.vue";
|
||||
import dialog_bzxzf from "../echarts_jz/dialog_bzxzf.vue";
|
||||
const data = reactive({
|
||||
wfjw: {
|
||||
list: [],
|
||||
gzf:{
|
||||
yaer:[],
|
||||
list1:[],
|
||||
list2:[],
|
||||
list3:[],
|
||||
},
|
||||
//覆盖率
|
||||
fgl: {
|
||||
list1: {
|
||||
finish: 60,
|
||||
wyfgl: {
|
||||
finish: 0,
|
||||
total: 100,
|
||||
percent: 60,
|
||||
percent: 0,
|
||||
},
|
||||
list2: {
|
||||
finish: "40",
|
||||
total: "100",
|
||||
percent: "40",
|
||||
wyxqsl: {
|
||||
finish: 0,
|
||||
total: 100,
|
||||
percent: 0,
|
||||
},
|
||||
}, //覆盖率
|
||||
tableData1: [
|
||||
{
|
||||
name: "金隅智慧园",
|
||||
address: "金隅智慧园",
|
||||
text: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
{
|
||||
name: "金隅智慧园",
|
||||
address: "金隅智慧园",
|
||||
text: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
{
|
||||
name: "金隅智慧园",
|
||||
address: "金隅智慧园",
|
||||
text: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
{
|
||||
name: "金隅智慧园",
|
||||
address: "金隅智慧园",
|
||||
text: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
],
|
||||
tableData2: [
|
||||
{
|
||||
starttime: "2023-11-01",
|
||||
endtime: "2023-11-30",
|
||||
address: "金隅智慧园",
|
||||
title: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
{
|
||||
starttime: "2023-11-01",
|
||||
endtime: "2023-11-30",
|
||||
address: "金隅智慧园",
|
||||
title: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
{
|
||||
starttime: "2023-11-01",
|
||||
endtime: "2023-11-30",
|
||||
address: "金隅智慧园",
|
||||
title: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
{
|
||||
starttime: "2023-11-01",
|
||||
endtime: "2023-11-30",
|
||||
address: "金隅智慧园",
|
||||
title: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
{
|
||||
starttime: "2023-11-01",
|
||||
endtime: "2023-11-30",
|
||||
address: "金隅智慧园",
|
||||
title: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
{
|
||||
starttime: "2023-11-01",
|
||||
endtime: "2023-11-30",
|
||||
address: "金隅智慧园",
|
||||
title: "金隅智慧园疫情防控演练",
|
||||
},
|
||||
],
|
||||
},
|
||||
//住宅工程
|
||||
zzzlts: {
|
||||
bjl: 0,
|
||||
jccs: 0,
|
||||
},
|
||||
//未来社区
|
||||
wlsq: [],
|
||||
//棚户区改造
|
||||
phq: {
|
||||
ygz: 0,
|
||||
phqgzs: [],
|
||||
},
|
||||
//危房解危
|
||||
wfjw: {
|
||||
chooselist: ["城镇", "农村"],
|
||||
choose: "城镇",
|
||||
城镇: [
|
||||
{ name: "已解危数", value: 0 },
|
||||
{ name: "已腾空解危数", value: 0 },
|
||||
],
|
||||
农村: [
|
||||
{ name: "已解危数", value: 0 },
|
||||
{ name: "已腾空解危数", value: 0 },
|
||||
],
|
||||
list: [],
|
||||
},
|
||||
//保障型住房
|
||||
|
||||
|
|
@ -308,14 +278,6 @@ const data = reactive({
|
|||
{ 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 {
|
||||
|
|
@ -425,31 +387,44 @@ const jsSj = (name, index) => {
|
|||
const showEchart = ref(false);
|
||||
const chooseWfjw = (val) => {
|
||||
data.wfjw.choose = val;
|
||||
if (val == "城镇") {
|
||||
data.wfjw.list = wfjwsj_cz;
|
||||
} else if (val == "农村") {
|
||||
data.wfjw.list = wfjwsj_nc;
|
||||
}
|
||||
data.wfjw.list=data.wfjw[val];
|
||||
console.log(data.wfjw.list);
|
||||
};
|
||||
//查看详情
|
||||
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;
|
||||
// data.lmb = res.data.lmb;
|
||||
// data.mz = res.data.mz;
|
||||
// // data.jkda = res.data.jkda;
|
||||
// data.jsbgl = res.data.jsbgl;
|
||||
// data.fyglrs = res.data.fyglrs;
|
||||
// data.jktj = res.data.jktj;
|
||||
// data.jkhd = res.data.jkhd;
|
||||
// data.lxbx = res.data.lxbx;
|
||||
await http.get("/api/ggfwyth/zysjOverview").then((res) => {
|
||||
if (res.code == 200) {
|
||||
//公租房
|
||||
data.gzf.year=res.data.gzf.year;
|
||||
data.gzf.fwsl=res.data.gzf.fwsl;
|
||||
data.gzf.rzsl=res.data.gzf.rzsl;
|
||||
data.gzf.bzxzlzf=res.data.gzf.bzxzlzf;
|
||||
//危房解危
|
||||
data.wfjw["城镇"][0].value = res.data.wfjw.cz.yjws;
|
||||
data.wfjw["城镇"][1].value = res.data.wfjw.cz.tkjws;
|
||||
data.wfjw["农村"][0].value = res.data.wfjw.nc.yjws;
|
||||
data.wfjw["农村"][1].value = res.data.wfjw.nc.tkjws;
|
||||
data.wfjw.list=data.wfjw["城镇"];
|
||||
//覆盖率
|
||||
data.fgl.wyfgl.finish = res.data.fgl.wyfgl;
|
||||
data.fgl.wyfgl.percent = res.data.fgl.wyfgl;
|
||||
data.fgl.wyxqsl.finish = res.data.fgl.wyxqsl;
|
||||
data.fgl.wyxqsl.percent = res.data.fgl.wyxqsl;
|
||||
//未来社区
|
||||
data.wlsq = res.data.wlsq;
|
||||
//住宅工程质量提升
|
||||
data.zzzlts.bjl = res.data.zzzlts.bjl;
|
||||
data.zzzlts.jccs = res.data.zzzlts.jccs;
|
||||
//棚户区改造
|
||||
data.phq.ygz = res.data.phq.ygz;
|
||||
data.phq.phqgzs = res.data.phq.phqgzs;
|
||||
|
||||
// }
|
||||
// });
|
||||
//
|
||||
showEchart.value = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
|
|
@ -880,7 +855,7 @@ onMounted(() => {});
|
|||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.table-style >>> .el-table__body tr:hover > td {
|
||||
background-color: #2f4b74!important;
|
||||
}
|
||||
.table-style >>> .el-table__body tr:hover > td {
|
||||
background-color: #2f4b74 !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue