战立标
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