dai
4 years ago
8 changed files with 1703 additions and 388 deletions
@ -0,0 +1,147 @@ |
|||||
|
.warning-box { |
||||
|
box-sizing: border-box; |
||||
|
// width: 1881px; |
||||
|
width: 100%; |
||||
|
// height: 100%; |
||||
|
min-height: 100%; |
||||
|
margin: 0 auto; |
||||
|
color: #999; |
||||
|
// background: url("../../../img/modules/visual/warning-box.png") no-repeat center; |
||||
|
background-size: 100% 100%; |
||||
|
padding: 25px 21px 35px 24px; |
||||
|
|
||||
|
&-top { |
||||
|
display: flex; |
||||
|
// justify-content: space-around; |
||||
|
justify-content: flex-start; |
||||
|
flex-wrap: wrap; |
||||
|
min-height: 190px; |
||||
|
|
||||
|
.top-item { |
||||
|
box-sizing: border-box; |
||||
|
width: 280px; |
||||
|
height: 190px; |
||||
|
padding: 10px 22px 14px 21px; |
||||
|
border-radius: 8px; |
||||
|
margin-right: 15px; |
||||
|
margin-bottom: 15px; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
&-img { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
width: 78px; |
||||
|
height: 78px; |
||||
|
margin-right: 16px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.top-item-left { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
span { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
span:nth-child(1) { |
||||
|
font-size: 18px; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
span:nth-child(2) { |
||||
|
font-size: 28px; |
||||
|
font-weight: bold; |
||||
|
color: #2194fe; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-num { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
flex-direction: column; |
||||
|
align-items: space-between; |
||||
|
// border: 1px solid red; |
||||
|
|
||||
|
.num-item { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 35px; |
||||
|
display: flex; |
||||
|
border-radius: 4px; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 10px 0 29px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&::after { |
||||
|
display: block; |
||||
|
content: ""; |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
background: #2194fe; |
||||
|
border-radius: 50%; |
||||
|
position: absolute; |
||||
|
left: 12px; |
||||
|
top: 50%; |
||||
|
transform: translate(0, -50%); |
||||
|
} |
||||
|
|
||||
|
div:nth-child(1) { |
||||
|
font-size: 16px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
div:nth-child(2) { |
||||
|
// width: 70%; |
||||
|
display: flex; |
||||
|
font-size: 20px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
|
||||
|
.right-icon { |
||||
|
width: 10px; |
||||
|
height: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.num-item-active { |
||||
|
background-color: #f0f3f7; |
||||
|
} |
||||
|
|
||||
|
.num-item:nth-child(2) { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-bottom { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: calc(100% - 300px); |
||||
|
padding: 35px 40px; |
||||
|
min-height: 300px; |
||||
|
margin-top: 30px; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
.pagination { |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 20px; |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,200 @@ |
|||||
|
<template> |
||||
|
<div class="m-chart"> |
||||
|
<canvas id="myChart" :width="width" :height="height" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
import F2 from "@antv/f2/lib/index-all"; |
||||
|
|
||||
|
// ios下字体渲染有bug |
||||
|
const fontFamily = "PingFang SC"; |
||||
|
const fontSize = 14; |
||||
|
|
||||
|
let chart; |
||||
|
let srcData = []; |
||||
|
|
||||
|
const iniChart = function (config, srcData, total, that) { |
||||
|
chart = new F2.Chart({ |
||||
|
id: "myChart", |
||||
|
...config, |
||||
|
}); |
||||
|
|
||||
|
let data = [ |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "--", |
||||
|
count: 51.39, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "--", |
||||
|
count: 356.68, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "--", |
||||
|
count: 20.0, |
||||
|
}, |
||||
|
{ |
||||
|
const: "const", |
||||
|
name: "--", |
||||
|
count: 116.53, |
||||
|
}, |
||||
|
]; |
||||
|
console.log("-----------------------------------", srcData); |
||||
|
data = srcData; |
||||
|
|
||||
|
chart.source(data); |
||||
|
// chart.axis(false); |
||||
|
chart.legend(false); |
||||
|
// chart.legend({ |
||||
|
// position: "bottom", |
||||
|
// align: "center", |
||||
|
// }); |
||||
|
chart.tooltip(false); |
||||
|
|
||||
|
chart |
||||
|
.interval() |
||||
|
.position("name*count") |
||||
|
.color("name", [ |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
"#3e8ef7", |
||||
|
]); |
||||
|
|
||||
|
chart.render(); |
||||
|
|
||||
|
// 绘制柱状图文本 |
||||
|
const offset = -5; |
||||
|
const canvas = chart.get("canvas"); |
||||
|
const group = canvas.addGroup(); |
||||
|
const shapes = {}; |
||||
|
data.forEach(function (obj) { |
||||
|
const point = chart.getPosition(obj); |
||||
|
const text = group.addShape("text", { |
||||
|
attrs: { |
||||
|
x: point.x, |
||||
|
y: point.y + offset, |
||||
|
text: obj.count + '人', |
||||
|
textAlign: "center", |
||||
|
textBaseline: "bottom", |
||||
|
fill: "#808080", |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
shapes[obj.name] = text; // 缓存该 shape, 便于后续查找 |
||||
|
}); |
||||
|
|
||||
|
// 配置柱状图点击交互 |
||||
|
chart.interaction("interval-select", { |
||||
|
selectAxisStyle: { |
||||
|
fill: "#000", |
||||
|
fontWeight: "bold", |
||||
|
}, |
||||
|
mode: "range", // range |
||||
|
// defaultSelected: { |
||||
|
// year: '1962 年', |
||||
|
// sales: 38 |
||||
|
// }, |
||||
|
onStart(ev) { |
||||
|
console.log(ev); |
||||
|
const data = ev.data, |
||||
|
selected = ev.selected; |
||||
|
if (data && selected) { |
||||
|
that.handleClickBar(data.name); |
||||
|
} else { |
||||
|
that.handleClickBar(); |
||||
|
} |
||||
|
}, |
||||
|
onEnd(ev) { |
||||
|
console.log("-------------------", ev); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
// 注意：需要把chart return 出来 |
||||
|
return chart; |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
name: "chart", |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
total: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
config: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
width: { |
||||
|
type: Number, |
||||
|
default: 400, |
||||
|
}, |
||||
|
height: { |
||||
|
type: Number, |
||||
|
default: 260, |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
iniLoading: false, |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
list(data) { |
||||
|
// chart.changeData(data); |
||||
|
srcData = data; |
||||
|
}, |
||||
|
}, |
||||
|
async created() { |
||||
|
await nextTick(200); |
||||
|
iniChart(this.config, this.list, this.total, this); |
||||
|
await nextTick(200); |
||||
|
this.iniLoading = true; |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
setList(data) { |
||||
|
chart.changeData(data); |
||||
|
srcData = data; |
||||
|
}, |
||||
|
|
||||
|
handleClickBar(name) { |
||||
|
let code = ""; |
||||
|
if (name) { |
||||
|
let item = this.list.find((item) => item.name == name); |
||||
|
console.log(item); |
||||
|
code = item && item.code; |
||||
|
} |
||||
|
console.log(code); |
||||
|
this.$emit("clickBar", { code }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped></style> |
||||
@ -0,0 +1,125 @@ |
|||||
|
<template> |
||||
|
<div class="m-scoll-notice"> |
||||
|
<div class="wrapper"> |
||||
|
<div class="bar" ref="barparent"> |
||||
|
<div class="bartext" ref="barchild" :style="bartextStyle"> |
||||
|
<!-- <li |
||||
|
v-for="(item, index) in list" |
||||
|
:key="item.configId + item.buildingId + index" |
||||
|
@click="toNoticeInfo(item)" |
||||
|
> |
||||
|
{{ item.noticeContent }} |
||||
|
</li> --> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
list: { |
||||
|
type: Array, |
||||
|
default: [], |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
parentClientWidth: 100000, |
||||
|
beyond: false, |
||||
|
}; |
||||
|
}, |
||||
|
components: {}, |
||||
|
|
||||
|
computed: { |
||||
|
bartextStyle() { |
||||
|
let len = this.list.length; |
||||
|
let beyond = this.beyond; |
||||
|
return { |
||||
|
paddingLeft: beyond ? this.parentClientWidth + "px" : "", |
||||
|
animation: beyond |
||||
|
? `move_left_right ${len * 5}s linear 0s infinite` |
||||
|
: "", |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.move(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
move() { |
||||
|
const parentClientWidth = this.$refs.barparent.clientWidth; |
||||
|
this.parentClientWidth = parentClientWidth; |
||||
|
//判断动画区域是否超出父元素宽度 宽则有动画，不宽则无 |
||||
|
const parent = this.$refs.barparent; |
||||
|
const child = this.$refs.barchild; |
||||
|
console.log("对比", child.clientWidth, parent.clientWidth); |
||||
|
this.beyond = child.clientWidth > parent.clientWidth; |
||||
|
}, |
||||
|
handleCancle() { |
||||
|
this.$emit("dialogCancle"); |
||||
|
this.resetData(); |
||||
|
}, |
||||
|
|
||||
|
resetData() { |
||||
|
this.dataForm = { |
||||
|
neighborHoodId: "", // 所属小区ID |
||||
|
buildingId: "", //所属楼栋ID |
||||
|
buildingUnitId: "", //所属单元ID |
||||
|
doorName: "", //门牌号 |
||||
|
houseType: "1", //房屋类型【楼房，平房，别墅】 |
||||
|
purpose: "1", //房屋用途【住宅，商业，办公，工业，仓储，商住混用，其他】 |
||||
|
rentFlag: 1, //是否出租【是：1，否：0】 |
||||
|
ownerPhone: "", //房主电话 |
||||
|
ownerName: "", //房主名字 |
||||
|
ownerIdCard: "", //房主身份证 |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.m-scoll-notice { |
||||
|
.wrapper { |
||||
|
// padding: 0 15px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
// background-color: "#FFF6EC"; |
||||
|
} |
||||
|
.bar { |
||||
|
width: 100%; |
||||
|
// height: 32px; |
||||
|
// line-height: 32px; |
||||
|
overflow: hidden; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bartext { |
||||
|
white-space: nowrap; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
.bartext li { |
||||
|
white-space: nowrap; |
||||
|
display: inline-block; |
||||
|
color: red; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.state-text-overflow { |
||||
|
animation: move_left_right 120s linear 0s infinite; |
||||
|
} |
||||
|
@keyframes move_left_right { |
||||
|
from { |
||||
|
transform: translateX(0%); |
||||
|
} |
||||
|
to { |
||||
|
transform: translateX(-80%); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<div class="screen-loading"> |
||||
|
<svg width="50px" |
||||
|
height="50px"> |
||||
|
<circle cx="25" |
||||
|
cy="25" |
||||
|
r="20" |
||||
|
fill="transparent" |
||||
|
stroke-width="3" |
||||
|
stroke-dasharray="31.415, 31.415" |
||||
|
stroke="#29cdff" |
||||
|
stroke-linecap="round"> |
||||
|
<animateTransform attributeName="transform" |
||||
|
type="rotate" |
||||
|
values="0, 25 25;360, 25 25" |
||||
|
dur="1.5s" |
||||
|
repeatCount="indefinite" /> |
||||
|
<animate attributeName="stroke" |
||||
|
values="#02bcfe;#3be6cb;#02bcfe" |
||||
|
dur="3s" |
||||
|
repeatCount="indefinite" /> |
||||
|
</circle> |
||||
|
|
||||
|
<circle cx="25" |
||||
|
cy="25" |
||||
|
r="10" |
||||
|
fill="transparent" |
||||
|
stroke-width="3" |
||||
|
stroke-dasharray="15.7, 15.7" |
||||
|
stroke="#29cdff" |
||||
|
stroke-linecap="round"> |
||||
|
<animateTransform attributeName="transform" |
||||
|
type="rotate" |
||||
|
values="360, 25 25;0, 25 25" |
||||
|
dur="1.5s" |
||||
|
repeatCount="indefinite" /> |
||||
|
<animate attributeName="stroke" |
||||
|
values="#3be6cb;#02bcfe;#3be6cb" |
||||
|
dur="3s" |
||||
|
repeatCount="indefinite" /> |
||||
|
</circle> |
||||
|
</svg> |
||||
|
<div class="loading-tip"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'DvLoading' |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.screen-loading { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
.loading-tip { |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,392 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="warning-table"> |
||||
|
<div class="table"> |
||||
|
<div class="table-header"> |
||||
|
<div |
||||
|
class="table-header-th" |
||||
|
v-for="(item, index) in headerList" |
||||
|
:key="item.title" |
||||
|
:style="headerStyle[index]" |
||||
|
> |
||||
|
{{ item.title }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="table-body"> |
||||
|
<div |
||||
|
class="table-body-tr" |
||||
|
v-for="(value, index) in tableData" |
||||
|
:key="index" |
||||
|
> |
||||
|
<div |
||||
|
class="td" |
||||
|
v-for="(item, indexs) in value" |
||||
|
:key="indexs" |
||||
|
:style="tableContentStyle[indexs]" |
||||
|
> |
||||
|
<div v-if="Array.isArray(item)"> |
||||
|
<span |
||||
|
v-show="rIndex < 3" |
||||
|
:key="resi.userId" |
||||
|
v-for="(resi, rIndex) in item" |
||||
|
> |
||||
|
{{ rIndex != 0 ? "、" : "" }} |
||||
|
<a @click="handlePeopleItem(resi.userId, value[1])">{{ |
||||
|
resi.residentName |
||||
|
}}</a> |
||||
|
</span> |
||||
|
</div> |
||||
|
<span v-else>{{ item }}</span> |
||||
|
<span |
||||
|
v-if="indexs + 1 == value.length && item.length > 3" |
||||
|
class="more" |
||||
|
@click.stop="onClickMorePop(index)" |
||||
|
ref="morePop" |
||||
|
> |
||||
|
更多> |
||||
|
<div class="more-pop" v-if="visiblePopList[index]"> |
||||
|
<span |
||||
|
:key="index + rIndex + resi.userId" |
||||
|
v-for="(resi, rIndex) in item" |
||||
|
> |
||||
|
{{ rIndex != 0 ? "、" : "" }} |
||||
|
<a @click="handlePeopleItem(resi.userId, value[1])">{{ |
||||
|
resi.residentName |
||||
|
}}</a> |
||||
|
</span> |
||||
|
</div> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<screen-loading v-if="visibleLoading">加载中</screen-loading> |
||||
|
<div class="no-data" v-if="tableData.length == 0 && !visibleLoading"> |
||||
|
<img |
||||
|
src="@/assets/img/modules/visual/noData.png" |
||||
|
class="no-data-img" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<people-more |
||||
|
v-if="showedPeopleMoreInfo && currentPepeleId" |
||||
|
:userId="currentPepeleId" |
||||
|
:gridName="currentPepeleGridName" |
||||
|
@close="showedPeopleMoreInfo = false" |
||||
|
/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ScreenLoading from "../screen-loading/index"; |
||||
|
import Vue from "vue"; |
||||
|
import peopleMore from "@/views/modules/shequ/cpts/people-more"; |
||||
|
|
||||
|
export default { |
||||
|
name: "warning-table", |
||||
|
components: { |
||||
|
ScreenLoading, |
||||
|
peopleMore, |
||||
|
}, |
||||
|
props: { |
||||
|
headerList: { |
||||
|
type: Array, |
||||
|
required: false, |
||||
|
default: () => { |
||||
|
return [ |
||||
|
{ title: "序号" }, |
||||
|
{ title: "所属网格" }, |
||||
|
{ title: "所属小区" }, |
||||
|
{ title: "楼号" }, |
||||
|
{ title: "姓名" }, |
||||
|
]; |
||||
|
}, |
||||
|
}, |
||||
|
tableData: { |
||||
|
type: Array, |
||||
|
required: false, |
||||
|
default: () => { |
||||
|
return [ |
||||
|
// [ |
||||
|
// 1, |
||||
|
// "商丘路社区第一网格", |
||||
|
// "商丘路小区", |
||||
|
// "2号楼", |
||||
|
// "杨颖、王平、刘佳敏、丁辉、杨萍", |
||||
|
// ], |
||||
|
// [ |
||||
|
// 2, |
||||
|
// "商丘路社区第一网格", |
||||
|
// "商丘路小区", |
||||
|
// "2号楼", |
||||
|
// "杨颖、王平、刘佳敏、丁辉、杨萍", |
||||
|
// ], |
||||
|
]; |
||||
|
}, |
||||
|
}, |
||||
|
// 单独给头部设置样式 |
||||
|
headerStyle: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [ |
||||
|
// { |
||||
|
// width:'200px', |
||||
|
// border:'1px solid red' |
||||
|
// }, |
||||
|
// { |
||||
|
// width:'200px' |
||||
|
// } |
||||
|
]; |
||||
|
}, |
||||
|
}, |
||||
|
// 单独给内容设置样式 |
||||
|
tableContentStyle: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [ |
||||
|
// { |
||||
|
// width:'200px', |
||||
|
// border:'1px solid red' |
||||
|
// }, |
||||
|
// { |
||||
|
// width:'200px' |
||||
|
// } |
||||
|
]; |
||||
|
}, |
||||
|
}, |
||||
|
visibleLoading: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
// // 表格平均分的份数 |
||||
|
// ava: { |
||||
|
// type: Number, |
||||
|
// default: 8 |
||||
|
// }, |
||||
|
// // 表头高度--默认占比10% |
||||
|
// headerHeightAva: { |
||||
|
// type: String, |
||||
|
// default: '10%' |
||||
|
// }, |
||||
|
// // 表格主体平均分成的份数 |
||||
|
// tableContentAva: { |
||||
|
// type: Number, |
||||
|
// default: 5 |
||||
|
// }, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 显示人员详情 |
||||
|
showedPeopleMoreInfo: false, |
||||
|
|
||||
|
currentPepeleId: "", |
||||
|
currentPepeleGridName: "", |
||||
|
|
||||
|
visiblePopList: [ |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
tableData(arr) { |
||||
|
if (Array.isArray(arr)) { |
||||
|
this.visiblePopList = new Array(arr.length).fill(false); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
window.addEventListener("click", (e) => { |
||||
|
this.visiblePopList = new Array(this.visiblePopList.length).fill(false); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
created() {}, |
||||
|
|
||||
|
methods: { |
||||
|
toUserInfo(uid) { |
||||
|
this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${uid}` }); |
||||
|
}, |
||||
|
|
||||
|
handlePeopleItem(uid, gridName) { |
||||
|
this.currentPepeleId = uid; |
||||
|
this.currentPepeleGridName = gridName; |
||||
|
|
||||
|
this.showedPeopleMoreInfo = true; |
||||
|
}, |
||||
|
|
||||
|
onClickMorePop(index) { |
||||
|
this.visiblePopList.forEach((item, indexs) => { |
||||
|
if (index == indexs) { |
||||
|
Vue.set(this.visiblePopList, index, true); |
||||
|
} else { |
||||
|
Vue.set(this.visiblePopList, indexs, false); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.warning-table { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: 1px solid #dfdfdd; |
||||
|
|
||||
|
&-header { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
background: #2194fe; |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
&-th { |
||||
|
text-align: center; |
||||
|
width: 20%; |
||||
|
&:nth-child(1) { |
||||
|
width: 5%; |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
width: 25%; |
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
width: 25%; |
||||
|
} |
||||
|
&:nth-child(5) { |
||||
|
width: 25%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-body { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: calc(100% - 50px); |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #333; |
||||
|
&-tr { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
border-bottom: 1px dashed #dfdfdd; |
||||
|
|
||||
|
.td { |
||||
|
text-align: center; |
||||
|
width: 20%; |
||||
|
border-left: 1px dashed #dfdfdd; |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-around; |
||||
|
|
||||
|
&:nth-child(1) { |
||||
|
width: 5%; |
||||
|
border-left: 0; |
||||
|
} |
||||
|
&:nth-child(2) { |
||||
|
width: 25%; |
||||
|
} |
||||
|
&:nth-child(3) { |
||||
|
width: 25%; |
||||
|
} |
||||
|
&:nth-child(5) { |
||||
|
width: 25%; |
||||
|
} |
||||
|
a { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.more { |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #e4dc00; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&-pop { |
||||
|
box-sizing: border-box; |
||||
|
display: block; |
||||
|
box-sizing: border-box; |
||||
|
width: 215px; |
||||
|
height: auto; |
||||
|
line-height: 20px; |
||||
|
border: 1px solid red; |
||||
|
position: absolute; |
||||
|
right: -100%; |
||||
|
top: 150%; |
||||
|
background: #fff; |
||||
|
box-shadow: 0 0 10px 0 #2194fe; |
||||
|
border: 1px solid #42a4fe; |
||||
|
border-radius: 5px; |
||||
|
font-size: 9px; |
||||
|
font-weight: 400; |
||||
|
color: #333; |
||||
|
padding: 16px 8px 10px 9px; |
||||
|
z-index: 1; |
||||
|
cursor: default; |
||||
|
// &::after{ |
||||
|
// position: absolute; |
||||
|
// left: 30%; |
||||
|
// top: -30%; |
||||
|
// display: flex; |
||||
|
// content:''; |
||||
|
// width: 0; |
||||
|
// height: 0; |
||||
|
// border-width: 13px; |
||||
|
// border-style: solid; |
||||
|
// border-color: transparent transparent rgba(26, 100, 204,0.5) transparent; |
||||
|
// // border-color: transparent transparent red transparent; |
||||
|
// transform: translate(-50%,0); |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-tr:nth-child(2n) { |
||||
|
} |
||||
|
|
||||
|
&-tr:hover { |
||||
|
background: rgba(16, 75, 164, 0.1); |
||||
|
} |
||||
|
// 暂无数据 |
||||
|
.no-data { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 50px); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
&-img { |
||||
|
width: 249px; |
||||
|
height: 172px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,200 @@ |
|||||
|
<template> |
||||
|
<div class="warning-box"> |
||||
|
<div class="warning-box-top"> |
||||
|
<div class="top-item" v-for="(item, index) in warningList" :key="index"> |
||||
|
<div class="top-item-img"> |
||||
|
<img :src="item.managementIcon" /> |
||||
|
<div class="top-item-left"> |
||||
|
<span>{{ item.label }}</span> |
||||
|
<span>{{ item.count }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="top-item-num"> |
||||
|
<div |
||||
|
class="num-item" |
||||
|
:class="{ |
||||
|
'num-item-active': activeIndex == index && activeLevel == '1', |
||||
|
}" |
||||
|
@click="onClickList(index, '1')" |
||||
|
> |
||||
|
<div>{{ item.level1 }}-{{ item.level2 }}人</div> |
||||
|
<div> |
||||
|
<div>{{ item.levelCount1 }}栋</div> |
||||
|
<img |
||||
|
src="../../../assets/img/modules/visual/right-icon.png" |
||||
|
class="right-icon" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div |
||||
|
class="num-item" |
||||
|
:class="{ |
||||
|
'num-item-active': activeIndex == index && activeLevel == '2', |
||||
|
}" |
||||
|
@click="onClickList(index, '2')" |
||||
|
> |
||||
|
<div>{{ item.level2 }}人以上</div> |
||||
|
<div> |
||||
|
<div>{{ item.levelCount2 }}栋</div> |
||||
|
<img |
||||
|
src="../../../assets/img/modules/visual/right-icon.png" |
||||
|
class="right-icon" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="warning-box-bottom"> |
||||
|
<screen-table |
||||
|
:headerList="headerList" |
||||
|
:tableData="tableData" |
||||
|
:visibleLoading="visibleLoading" |
||||
|
></screen-table> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination |
||||
|
:current-page="pageNo" |
||||
|
:page-size="pageSize" |
||||
|
background |
||||
|
layout="prev, pager, next" |
||||
|
@size-change="pageSizeChangeHandleNew" |
||||
|
@current-change="pageCurrentChangeHandleNew" |
||||
|
:total="total" |
||||
|
> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { requestPost } from "@/js/dai/request"; |
||||
|
import screenTable from "./components/screen-table/index"; |
||||
|
import cptCard from "@/views/modules/visual/cpts/card"; |
||||
|
import nextTick from "dai-js/tools/nextTick"; |
||||
|
|
||||
|
export default { |
||||
|
name: "warning-box", |
||||
|
components: { |
||||
|
cptCard, |
||||
|
screenTable, |
||||
|
}, |
||||
|
props: { |
||||
|
buildingId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
configId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
warningList: [], |
||||
|
headerList: [ |
||||
|
{ title: "序号" }, |
||||
|
{ title: "所属网格" }, |
||||
|
{ title: "所属小区" }, |
||||
|
{ title: "楼号" }, |
||||
|
{ title: "姓名" }, |
||||
|
], |
||||
|
tableData: [ |
||||
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], |
||||
|
], |
||||
|
visibleLoading: true, |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
activeIndex: 0, |
||||
|
activeLevel: "1", |
||||
|
}; |
||||
|
}, |
||||
|
async mounted() { |
||||
|
await nextTick(100); |
||||
|
this.getBuildingwarnlist(); |
||||
|
}, |
||||
|
methods: { |
||||
|
onClickList(index, level) { |
||||
|
this.activeIndex = index; |
||||
|
this.activeLevel = level; |
||||
|
this.pageNo = 1; |
||||
|
this.getUserwarnlist(); |
||||
|
}, |
||||
|
//具体人员列表 |
||||
|
async getUserwarnlist() { |
||||
|
const { activeIndex, activeLevel, warningList } = this; |
||||
|
const reqItem = warningList[activeIndex]; |
||||
|
let tableData = []; |
||||
|
const url = "/epmetuser/statsresiwarn/userwarnlist"; |
||||
|
let params = { |
||||
|
configId: reqItem.configId, |
||||
|
buildingIdList: reqItem["buildingIdList" + activeLevel], |
||||
|
pageNo: this.pageNo, |
||||
|
pageSize: this.pageSize, |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
data.list.forEach((item, index) => { |
||||
|
tableData.push([ |
||||
|
index + 1, |
||||
|
item.gridName, |
||||
|
item.neighborhoodName, |
||||
|
item.buildingName, |
||||
|
item.userList || "暂无", |
||||
|
]); |
||||
|
}); |
||||
|
this.tableData = tableData; |
||||
|
this.total = data.total; |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
// 【人员预警】 楼宇预警数量列表 |
||||
|
async getBuildingwarnlist() { |
||||
|
const url = "/epmetuser/statsresiwarn/buildingwarnlist"; |
||||
|
let params = { |
||||
|
agencyId: this.$store.state.user.agencyId, |
||||
|
}; |
||||
|
const { data, code, msg } = await requestPost(url, params); |
||||
|
if (code === 0) { |
||||
|
this.warningList = data; |
||||
|
this.visibleLoading = false; |
||||
|
const { buildingId, configId } = this; |
||||
|
if (configId && buildingId) { |
||||
|
let activeIndex = 0; |
||||
|
let activeLevel = 1; |
||||
|
data.forEach((item, index) => { |
||||
|
if (item.configId == configId) { |
||||
|
activeIndex = index; |
||||
|
if (item.buildingIdList1.indexOf(buildingId) !== -1) { |
||||
|
activeLevel = 1; |
||||
|
} |
||||
|
if (item.buildingIdList2.indexOf(buildingId) !== -1) { |
||||
|
activeLevel = 2; |
||||
|
} |
||||
|
if (item.buildingIdList3.indexOf(buildingId) !== -1) { |
||||
|
activeLevel = 3; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
this.activeIndex = activeIndex; |
||||
|
this.activeLevel = activeLevel; |
||||
|
} |
||||
|
this.getUserwarnlist(); |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
pageSizeChangeHandleNew(val) { |
||||
|
this.pageNo = 1; |
||||
|
this.pageSize = val; |
||||
|
}, |
||||
|
pageCurrentChangeHandleNew(val) { |
||||
|
this.pageNo = val; |
||||
|
this.getUserwarnlist(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" src="@/assets/scss/modules/warning.scss" scoped></style> |
||||
Loading…
Reference in new issue