战立标
2 years ago
20 changed files with 1619 additions and 72 deletions
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,66 @@ |
|||||
|
.table { |
||||
|
|
||||
|
/deep/ .el-table { |
||||
|
border: 1px solid #225087 !important; |
||||
|
} |
||||
|
/deep/ .el-table td, |
||||
|
/deep/ .el-table tr { |
||||
|
padding: 10px 0px !important; |
||||
|
border: 1px solid #225087 !important; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table th>.cell { |
||||
|
padding: 0!important; |
||||
|
} |
||||
|
/deep/ .el-table th { |
||||
|
padding: 6px 14px !important; |
||||
|
border: 1px solid #225087 !important; |
||||
|
background: #0E3873; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table td, |
||||
|
/deep/ .el-table th { |
||||
|
background: none !important; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table td { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
text-shadow: 1px 2px 4px rgba(10, 32, 60, 0.51); |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table tr { |
||||
|
background: none !important; |
||||
|
background-size: 100% !important; |
||||
|
|
||||
|
|
||||
|
&:hover { |
||||
|
background-color: rgba(26, 149, 255, 0.3) !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table { |
||||
|
background: none !important; |
||||
|
|
||||
|
&:before { |
||||
|
background: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table__header-wrapper tr { |
||||
|
color: #A3B9DA !important; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
opacity: 0.76; |
||||
|
|
||||
|
&:hover { |
||||
|
background: none !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-table__header-wrapper { |
||||
|
background: none; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,100 @@ |
|||||
|
<template> |
||||
|
<div class="map-right"> |
||||
|
<img :class="isShow?'':'close'" alt="" class="map-right-icon" src="@/assets/images/renfang/map-right-open.png" |
||||
|
@click="isShow = !isShow"> |
||||
|
<div :class="isShow?'':'hidden'" class="map-right-content"> |
||||
|
<div class="title"> |
||||
|
海伦路街道 |
||||
|
</div> |
||||
|
<div class="map-list"> |
||||
|
<div class="map-item">南昌路社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
<div class="map-item">北岭山社区</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "map-right", |
||||
|
data() { |
||||
|
return { |
||||
|
isShow: true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.map-right { |
||||
|
position: absolute; |
||||
|
top: calc(50% - 184px); |
||||
|
right: 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.map-right-icon { |
||||
|
transform: rotate(180deg); |
||||
|
&.close { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.map-right-content { |
||||
|
overflow: hidden; |
||||
|
width: 134px; |
||||
|
transition: all .3s; |
||||
|
color: #fff; |
||||
|
border: 1px solid #488CC5; |
||||
|
border-radius: 2px; |
||||
|
background: rgba(10, 35, 81, 0.66); |
||||
|
|
||||
|
&.hidden { |
||||
|
width: 0; |
||||
|
border-width: 0px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
line-height: 32px; |
||||
|
height: 32px; |
||||
|
padding-left: 24px; |
||||
|
background: url("@/assets/images/renfang/map-right-title.png"); |
||||
|
} |
||||
|
|
||||
|
.map-list { |
||||
|
overflow-y: auto; |
||||
|
height: 336px; |
||||
|
|
||||
|
.map-item { |
||||
|
line-height: 42px; |
||||
|
overflow: hidden; |
||||
|
height: 42px; |
||||
|
padding-left: 24px; |
||||
|
text-overflow: ellipsis; |
||||
|
border-bottom: 1px solid; |
||||
|
border-image: linear-gradient(to right, #000 0%, #4eafd5 50%, #000 100%); |
||||
|
border-image-slice: 1; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #72F7FF; |
||||
|
background: url("@/assets/images/renfang/map-right-cur.png"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,331 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="visualizing laonianren"> |
||||
|
<div class="visualizing-left"> |
||||
|
<div> |
||||
|
<data-title title="特殊人群类别统计" /> |
||||
|
</div> |
||||
|
<div id="tsrqLeftChart" style="height: 400px"></div> |
||||
|
</div> |
||||
|
<div class="visualizing-right"> |
||||
|
<div> |
||||
|
<data-title title="特殊人群享受服务情况统计" /> |
||||
|
</div> |
||||
|
<div id="tsrqServiceChart" style="height: 400px"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue"; |
||||
|
import * as echarts from "echarts"; |
||||
|
|
||||
|
function dataFormatter(arr) { |
||||
|
return arr.map((item) => { |
||||
|
return { |
||||
|
name: item.classification, |
||||
|
value: Number(item.classificationNum), |
||||
|
}; |
||||
|
}); |
||||
|
} |
||||
|
export default { |
||||
|
name: "teshurenqun", |
||||
|
props: { |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
org_id: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
components: { |
||||
|
dataTitle, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
tsrqLeft: [], |
||||
|
tsrqRight: [], |
||||
|
tsrqService: [], |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
const query = this.$route.query; |
||||
|
this.getData(); |
||||
|
}, |
||||
|
activated() {}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
this.$http |
||||
|
.get("?type=0") |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg); |
||||
|
} |
||||
|
this.tsrqLeft = dataFormatter(res.data); |
||||
|
this.initLeftCharts(); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
this.$http |
||||
|
.get("?type=1") |
||||
|
.then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg); |
||||
|
} |
||||
|
this.tsrqRight = dataFormatter(res.data); |
||||
|
this.initRightCharts(); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}, |
||||
|
initLeftCharts() { |
||||
|
let div = document.getElementById("tsrqLeftChart"); |
||||
|
this.myChart1 = echarts.init(div); |
||||
|
const option = { |
||||
|
color: [ |
||||
|
"#15a7ed", |
||||
|
"#22b998", |
||||
|
"#5f6ff4", |
||||
|
"#a66eeb", |
||||
|
"#faa834", |
||||
|
"#fd6200", |
||||
|
"#fb3905", |
||||
|
], |
||||
|
legend: { |
||||
|
orient: "vertical", |
||||
|
top: 20, |
||||
|
left: 10, |
||||
|
icon: "rect", |
||||
|
itemHeight: 14, |
||||
|
itemWidth: 14, |
||||
|
textStyle: { |
||||
|
color: "#ffffff", |
||||
|
rich: { |
||||
|
name: { |
||||
|
width: 90, |
||||
|
fontSize: 12, |
||||
|
color: "#dddee7", |
||||
|
}, |
||||
|
value: { |
||||
|
width: 30, |
||||
|
align: "right", |
||||
|
fontSize: 18, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data: this.tsrqLeft, |
||||
|
formatter: (name) => { |
||||
|
if (this.tsrqLeft.length) { |
||||
|
const item = this.tsrqLeft.filter((item) => item.name === name)[0]; |
||||
|
return `{name|${name}}{value| ${item.value}}`; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
toolbox: { |
||||
|
show: false, |
||||
|
feature: { |
||||
|
mark: { show: true }, |
||||
|
dataView: { show: true, readOnly: false }, |
||||
|
restore: { show: true }, |
||||
|
saveAsImage: { show: true }, |
||||
|
}, |
||||
|
}, |
||||
|
title: { |
||||
|
show: !this.tsrqLeft || this.tsrqLeft.length == 0, // 是否要展示“暂无数据”矢量图 |
||||
|
text: " {a|}", // 写入占位符a，以便后续填充内容 |
||||
|
x: "center", |
||||
|
y: "center", |
||||
|
subtext: "暂无数据", // 子标题 |
||||
|
itemGap: -10, // 设置主副标题间隔 |
||||
|
textStyle: { |
||||
|
rich: { |
||||
|
a: { |
||||
|
height: 128, // 设置图片高度 |
||||
|
width: 268, // 设置图片宽度 |
||||
|
backgroundColor: { |
||||
|
// 引入图片，作为背景图，填写相对路径 |
||||
|
image: require("@/assets/images/overview/zanwu.png"), |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
subtextStyle: { |
||||
|
// 配置副标题的文字样式 |
||||
|
fontSize: 12, |
||||
|
color: "#ffffff", |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: |
||||
|
this.tsrqLeft && this.tsrqLeft.length > 0 ? [30, 130] : [0, 0], |
||||
|
center: ["50%", "50%"], |
||||
|
roseType: "area", |
||||
|
itemStyle: { |
||||
|
borderRadius: 0, |
||||
|
}, |
||||
|
top: 20, |
||||
|
left: -40, |
||||
|
label: { |
||||
|
position: "inside", |
||||
|
formatter: "{d}%", |
||||
|
textStyle: { |
||||
|
color: "#ffffff", |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
}, |
||||
|
data: this.tsrqLeft, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
this.myChart1.setOption(option); |
||||
|
this.myChart1.on("click", (e) => { |
||||
|
this.$router.push({ |
||||
|
path: "/dataBoard/renfang/resi-class-new", |
||||
|
query: { |
||||
|
org_id: this.org_id, |
||||
|
type_id: "aged", |
||||
|
type_name: "特殊人群", |
||||
|
pageType: "normal", |
||||
|
type: "teshurenqun", |
||||
|
olds: e.data.name, |
||||
|
}, |
||||
|
}); |
||||
|
}); |
||||
|
window.addEventListener("resize", () => this.myChart1.resize()); |
||||
|
}, |
||||
|
initRightCharts() { |
||||
|
let div = document.getElementById("tsrqRightChart"); |
||||
|
this.myChart2 = echarts.init(div); |
||||
|
const option = { |
||||
|
color: [ |
||||
|
"#15a7ed", |
||||
|
"#22b998", |
||||
|
"#5f6ff4", |
||||
|
"#a66eeb", |
||||
|
"#faa834", |
||||
|
"#fd6200", |
||||
|
"#fb3905", |
||||
|
], |
||||
|
legend: { |
||||
|
orient: "vertical", |
||||
|
top: 20, |
||||
|
left: 10, |
||||
|
icon: "rect", |
||||
|
itemHeight: 14, |
||||
|
itemWidth: 14, |
||||
|
textStyle: { |
||||
|
color: "#ffffff", |
||||
|
rich: { |
||||
|
name: { |
||||
|
width: 80, |
||||
|
fontSize: 12, |
||||
|
color: "#dddee7", |
||||
|
}, |
||||
|
value: { |
||||
|
width: 30, |
||||
|
align: "right", |
||||
|
fontSize: 18, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
data: this.tsrqRight, |
||||
|
formatter: (name) => { |
||||
|
if (this.tsrqRight.length) { |
||||
|
const item = this.tsrqRight.filter( |
||||
|
(item) => item.name === name |
||||
|
)[0]; |
||||
|
return `{name|${name}}{value| ${item.value}}`; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
toolbox: { |
||||
|
show: false, |
||||
|
feature: { |
||||
|
mark: { show: true }, |
||||
|
dataView: { show: true, readOnly: false }, |
||||
|
restore: { show: true }, |
||||
|
saveAsImage: { show: true }, |
||||
|
}, |
||||
|
}, |
||||
|
title: { |
||||
|
show: !this.tsrqRight || this.tsrqRight.length == 0, // 是否要展示“暂无数据”矢量图 |
||||
|
text: " {a|}", // 写入占位符a，以便后续填充内容 |
||||
|
x: "center", |
||||
|
y: "center", |
||||
|
subtext: "暂无数据", // 子标题 |
||||
|
itemGap: -10, // 设置主副标题间隔 |
||||
|
textStyle: { |
||||
|
rich: { |
||||
|
a: { |
||||
|
height: 128, // 设置图片高度 |
||||
|
width: 268, // 设置图片宽度 |
||||
|
backgroundColor: { |
||||
|
// 引入图片，作为背景图，填写相对路径 |
||||
|
image: require("@/assets/images/overview/zanwu.png"), |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
subtextStyle: { |
||||
|
// 配置副标题的文字样式 |
||||
|
fontSize: 12, |
||||
|
color: "#ffffff", |
||||
|
}, |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: "pie", |
||||
|
radius: |
||||
|
this.tsrqRight && this.tsrqRight.length > 0 ? [30, 130] : [0, 0], |
||||
|
center: ["50%", "50%"], |
||||
|
roseType: "area", |
||||
|
itemStyle: { |
||||
|
borderRadius: 0, |
||||
|
}, |
||||
|
top: 20, |
||||
|
left: -40, |
||||
|
label: { |
||||
|
position: "inside", |
||||
|
formatter: "{d}%", |
||||
|
textStyle: { |
||||
|
color: "#ffffff", |
||||
|
fontSize: 12, |
||||
|
}, |
||||
|
}, |
||||
|
data: this.tsrqRight, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
this.myChart2.on("click", (e) => { |
||||
|
this.$router.push({ |
||||
|
path: "/dataBoard/renfang/resi-class-new", |
||||
|
query: { |
||||
|
org_id: this.org_id, |
||||
|
type_id: "aged", |
||||
|
type_name: "特殊人群", |
||||
|
pageType: "normal", |
||||
|
type: "teshurenqun", |
||||
|
gategoryCode: e.data.name, |
||||
|
}, |
||||
|
}); |
||||
|
}); |
||||
|
this.myChart2.setOption(option); |
||||
|
window.addEventListener("resize", () => this.myChart2.resize()); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/dataBoard/renfang/index.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
<style lang="scss" scoped> |
||||
|
.laonianren { |
||||
|
padding: 140px 240px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,26 @@ |
|||||
|
<template> |
||||
|
<div class="table"> |
||||
|
<el-table :data="data" height="400px"> |
||||
|
<el-table-column align="center" label="序号" prop="number" width="80"></el-table-column> |
||||
|
<el-table-column label="12345热线投诉\n人数" prop="column1"></el-table-column> |
||||
|
<el-table-column label="上级满意度调查\n不满意人数" prop="column2"></el-table-column> |
||||
|
<el-table-column label="社区自查不满意\n人数" prop="column3" width="120"></el-table-column> |
||||
|
<el-table-column label="社区自查得分" prop="column3" width="120"></el-table-column> |
||||
|
</el-table> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "index", |
||||
|
data() { |
||||
|
return { |
||||
|
data: [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@import "@/assets/scss/dataBoard/table-border.scss"; |
||||
|
</style> |
||||
Loading…
Reference in new issue