13176889840
4 years ago
5 changed files with 24661 additions and 79 deletions
File diff suppressed because it is too large
@ -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,326 @@ |
|||||
|
<template> |
||||
|
<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 |
||||
|
v-if="operate" |
||||
|
class="table-header-th" |
||||
|
> |
||||
|
操作 |
||||
|
</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 headerList" |
||||
|
:key="indexs" |
||||
|
:style="tableContentStyle[indexs]" |
||||
|
> |
||||
|
{{ value[item.coulmn] }} |
||||
|
<!-- <span |
||||
|
v-if="indexs + 1 == value.length && item.length > 8" |
||||
|
class="more" |
||||
|
@click.stop="onClickMorePop(index)" |
||||
|
ref="morePop" |
||||
|
> |
||||
|
更多> |
||||
|
<span class="more-pop" v-if="visiblePopList[index]"> |
||||
|
{{ value[item.coulmn] }} |
||||
|
</span> |
||||
|
</span> --> |
||||
|
</div> |
||||
|
<div v-if="operate" class="td" @click="look(value)">查看</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" |
||||
|
alt="" |
||||
|
srcset="" |
||||
|
class="no-data-img" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ScreenLoading from "../screen-loading/index"; |
||||
|
import Vue from "vue"; |
||||
|
export default { |
||||
|
name: "warning-table", |
||||
|
components: { |
||||
|
ScreenLoading, |
||||
|
}, |
||||
|
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, |
||||
|
}, |
||||
|
operate: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
} |
||||
|
// // 表格平均分的份数 |
||||
|
// ava: { |
||||
|
// type: Number, |
||||
|
// default: 8 |
||||
|
// }, |
||||
|
// // 表头高度--默认占比10% |
||||
|
// headerHeightAva: { |
||||
|
// type: String, |
||||
|
// default: '10%' |
||||
|
// }, |
||||
|
// // 表格主体平均分成的份数 |
||||
|
// tableContentAva: { |
||||
|
// type: Number, |
||||
|
// default: 5 |
||||
|
// }, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
visiblePopList: [ |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
false, |
||||
|
], |
||||
|
}; |
||||
|
}, |
||||
|
watch: { |
||||
|
tableData(arr) { |
||||
|
if (Array.isArray(arr)) { |
||||
|
console.log('tabldate-dddsss', this.tableData) |
||||
|
this.visiblePopList = new Array(arr.length).fill(false); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
console.log('tabldate-ddd', this.tableData) |
||||
|
window.addEventListener("click", (e) => { |
||||
|
this.visiblePopList = new Array(this.visiblePopList.length).fill(false); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
created() {}, |
||||
|
|
||||
|
methods: { |
||||
|
onClickMorePop(index) { |
||||
|
this.visiblePopList.forEach((item, indexs) => { |
||||
|
if (index == indexs) { |
||||
|
Vue.set(this.visiblePopList, index, true); |
||||
|
} else { |
||||
|
Vue.set(this.visiblePopList, indexs, false); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
look(val) { |
||||
|
console.log('look-----l', val) |
||||
|
this.$emit('look', val) |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.warning-table { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.table { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
&-header { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
background: rgba(8, 37, 134, 0.85); |
||||
|
font-size: 16px; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
&-th { |
||||
|
text-align: center; |
||||
|
width: calc(100% / 5); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-body { |
||||
|
box-sizing: border-box; |
||||
|
width: 100%; |
||||
|
height: calc(100% - 50px); |
||||
|
font-size: 18px; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
|
||||
|
&-tr { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
// height: calc(100% / 10); |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
|
||||
|
.td { |
||||
|
text-align: center; |
||||
|
width: calc(100% / 5); |
||||
|
cursor: pointer; |
||||
|
.more { |
||||
|
font-size: 18px; |
||||
|
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: #06186d; |
||||
|
border: 1px solid #1a64cc; |
||||
|
border-radius: 5px; |
||||
|
font-size: 9px; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
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); |
||||
|
// } |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-tr:nth-child(2n) { |
||||
|
background: rgba(16, 75, 164, 0.24); |
||||
|
} |
||||
|
|
||||
|
&-tr:hover { |
||||
|
background: url("../../../../../assets/img/modules/visual/hover-bac.png") |
||||
|
no-repeat center; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
// 暂无数据 |
||||
|
.no-data { |
||||
|
width: 100%; |
||||
|
height: calc(100% - 50px); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
&-img { |
||||
|
width: 249px; |
||||
|
height: 172px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,13 +1,583 @@ |
|||||
<template> |
<template> |
||||
<div>ll</div> |
<div class="warning-box"> |
||||
|
<cpt-card> |
||||
|
<div class="card-title"> |
||||
|
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" /> |
||||
|
<div class="title-label"> |
||||
|
<el-dropdown trigger="click"> |
||||
|
<span class="el-dropdown-link"> |
||||
|
全部网格<i class="el-icon-caret-bottom el-icon--right"></i> |
||||
|
</span> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item>黄金糕</el-dropdown-item> |
||||
|
<el-dropdown-item>狮子头</el-dropdown-item> |
||||
|
<el-dropdown-item>螺蛳粉</el-dropdown-item> |
||||
|
<el-dropdown-item>双皮奶</el-dropdown-item> |
||||
|
<el-dropdown-item>蚵仔煎</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
</div> |
||||
|
<div class="title-time"> |
||||
|
<div class="title-time-label">选择时间</div> |
||||
|
<div class=""> |
||||
|
<el-date-picker |
||||
|
v-model="value2" |
||||
|
type="month" |
||||
|
placeholder="选择月"> |
||||
|
</el-date-picker> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="card-echart"> |
||||
|
<div class="card-left"> |
||||
|
<div class="echart-wr"> |
||||
|
<div class="echart-cicle"></div> |
||||
|
<div id="echartOrg" class="echart-org"></div> |
||||
|
</div> |
||||
|
<div class="echarts-tips"> |
||||
|
<div class="tips-list"> |
||||
|
<div class="tips-item"> |
||||
|
<div class="tips-item-icon"></div> |
||||
|
<div class="tips-item-text">为民服务</div> |
||||
|
</div> |
||||
|
<div class="tips-item"> |
||||
|
<div class="tips-item-icon"></div> |
||||
|
<div class="tips-item-text">社会治安综合</div> |
||||
|
</div> |
||||
|
<div class="tips-item"> |
||||
|
<div class="tips-item-icon"></div> |
||||
|
<div class="tips-item-text">社会治安综合</div> |
||||
|
</div> |
||||
|
<div class="tips-item"> |
||||
|
<div class="tips-item-icon"></div> |
||||
|
<div class="tips-item-text">卫生计生监管执法</div> |
||||
|
</div> |
||||
|
<div class="tips-item"> |
||||
|
<div class="tips-item-icon"></div> |
||||
|
<div class="tips-item-text">卫生计生监管执法</div> |
||||
|
</div> |
||||
|
<div class="tips-item"> |
||||
|
<div class="tips-item-icon"></div> |
||||
|
<div class="tips-item-text">建设管理</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tips-item"> |
||||
|
<div class="tips-item-icon"></div> |
||||
|
<div class="tips-item-text">为民服务</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card-left"> |
||||
|
<div class="echart-wr"> |
||||
|
<div class="echart-cicle"></div> |
||||
|
<div id="echartType" class="echart-org"></div> |
||||
|
</div> |
||||
|
<div class="echarts-tips echarts-tips-wd50"> |
||||
|
<div class="tips-lists"> |
||||
|
<div class="tips-items"> |
||||
|
<div class="tips-items-title"> |
||||
|
<div>志愿者</div> |
||||
|
</div> |
||||
|
<div class="tips-items-num"> |
||||
|
<div class="tips-item-count">17513</div> |
||||
|
<div class="tips-item-has">（服务次数：2430）</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tips-items"> |
||||
|
<div class="tips-items-title"> |
||||
|
<div>志愿者</div> |
||||
|
</div> |
||||
|
<div class="tips-items-num"> |
||||
|
<div class="tips-item-count">17</div> |
||||
|
<div class="tips-item-has">（服务次数：2430）</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tips-items"> |
||||
|
<div class="tips-items-title"> |
||||
|
<div>志愿者</div> |
||||
|
</div> |
||||
|
<div class="tips-items-num"> |
||||
|
<div class="tips-item-count">175</div> |
||||
|
<div class="tips-item-has">（服务次数：2430）</div> |
||||
|
</div> |
||||
|
</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> |
||||
|
</cpt-card> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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"; |
||||
|
|
||||
|
import * as echarts from 'echarts'; |
||||
export default { |
export default { |
||||
|
name: "warning-box", |
||||
|
components: { |
||||
|
cptCard, |
||||
|
screenTable, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
warningList: [], |
||||
|
headerList: [ |
||||
|
{ title: "序号", coulmn: 'index' }, |
||||
|
{ title: "需求类型", coulmn: 'gridName' }, |
||||
|
{ title: "具体内容", coulmn: 'buildingName' }, |
||||
|
{ title: "上报情况", coulmn: 'neighborhoodName' }, |
||||
|
{ title: "上报人", coulmn: 'residentNames' }, |
||||
|
{ title: "上报时间", coulmn: 'residentNames' }, |
||||
|
{ title: "是否认领", coulmn: 'residentNames' }, |
||||
|
{ title: "认领方", coulmn: 'residentNames' }, |
||||
|
{ title: "认领时间", coulmn: 'residentNames' } |
||||
|
], |
||||
|
tableData: [ |
||||
|
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], |
||||
|
], |
||||
|
value2: '', |
||||
|
visibleLoading: true, |
||||
|
pageNo: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0, |
||||
|
activeIndex: 0, |
||||
|
activeLevel: "1", |
||||
|
}; |
||||
|
}, |
||||
|
async mounted() { |
||||
|
await nextTick(100); |
||||
|
this.initCharts() |
||||
|
this.initChartType() |
||||
|
this.getBuildingwarnlist(); |
||||
|
}, |
||||
|
methods: { |
||||
|
initCharts() { |
||||
|
const eId = document.getElementById('echartOrg') |
||||
|
let _charts = echarts.init(eId) |
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
show: false, |
||||
|
orient: 'vertical', |
||||
|
top: '40%', |
||||
|
left: 'right', |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
title: { |
||||
|
text: '12000', //图形标题，配置在中间对应效果图的80% |
||||
|
subtext: '总数', |
||||
|
left: "center", |
||||
|
top: "center", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
fontSize: 28, |
||||
|
align: "center" |
||||
|
}, |
||||
|
subtextStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
// name: 'Access From', |
||||
|
type: 'pie', |
||||
|
// center: ['10%', '50%'], |
||||
|
radius: ['40%', '60%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
// top: top + '%', |
||||
|
// height: '80%', |
||||
|
left: 'center', |
||||
|
width: 400, |
||||
|
label: { |
||||
|
position: 'outer', |
||||
|
alignTo: 'edge', |
||||
|
formatter: '{a|{c}}\n{name|{b}}', |
||||
|
minMargin: 5, |
||||
|
edgeDistance: 20, |
||||
|
lineHeight: 15, |
||||
|
color: '#fff', |
||||
|
fontSize: 12, |
||||
|
distanceToLabelLine: 10, |
||||
|
rich: { |
||||
|
a: { |
||||
|
fontSize: 15, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '14', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: true, |
||||
|
length: 20, |
||||
|
length2: 0, |
||||
|
maxSurfaceAngle: 80 |
||||
|
}, |
||||
|
labelLayout: function (params) { |
||||
|
const isLeft = params.labelRect.x < _charts.getWidth() / 2; |
||||
|
const points = params.labelLinePoints; |
||||
|
// Update the end point. |
||||
|
points[2][0] = isLeft |
||||
|
? params.labelRect.x |
||||
|
: params.labelRect.x + params.labelRect.width; |
||||
|
return { |
||||
|
labelLinePoints: points |
||||
|
}; |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 1048, name: 'Search Engine' }, |
||||
|
{ value: 735, name: 'Direct' }, |
||||
|
{ value: 580, name: 'Email' }, |
||||
|
{ value: 484, name: 'Union Ads' }, |
||||
|
{ value: 300, name: 'Video Ads' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
option && _charts.setOption(option); |
||||
|
|
||||
} |
}, |
||||
|
initChartType() { |
||||
|
const eId = document.getElementById('echartType') |
||||
|
let _charts = echarts.init(eId) |
||||
|
let option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
legend: { |
||||
|
show: false, |
||||
|
orient: 'vertical', |
||||
|
top: '40%', |
||||
|
left: 'right', |
||||
|
textStyle: { |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
title: { |
||||
|
text: '12000', //图形标题，配置在中间对应效果图的80% |
||||
|
subtext: '总数', |
||||
|
left: "center", |
||||
|
top: "center", |
||||
|
textStyle: { |
||||
|
color: "#fff", |
||||
|
fontSize: 28, |
||||
|
align: "center" |
||||
|
}, |
||||
|
subtextStyle: { |
||||
|
fontSize: 16, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
// name: 'Access From', |
||||
|
type: 'pie', |
||||
|
// center: ['10%', '50%'], |
||||
|
radius: ['40%', '60%'], |
||||
|
avoidLabelOverlap: false, |
||||
|
// top: top + '%', |
||||
|
// height: '80%', |
||||
|
left: 'center', |
||||
|
width: 400, |
||||
|
label: { |
||||
|
position: 'outer', |
||||
|
alignTo: 'labelLine', |
||||
|
formatter: '{name|{b}}\n{time|{c} 小时}', |
||||
|
minMargin: 5, |
||||
|
edgeDistance: 20, |
||||
|
lineHeight: 15, |
||||
|
color: '#fff', |
||||
|
fontSize: 15, |
||||
|
rich: { |
||||
|
time: { |
||||
|
fontSize: 10, |
||||
|
color: '#fff' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
emphasis: { |
||||
|
label: { |
||||
|
show: true, |
||||
|
fontSize: '14', |
||||
|
fontWeight: 'bold' |
||||
|
} |
||||
|
}, |
||||
|
labelLine: { |
||||
|
show: true, |
||||
|
length: 20, |
||||
|
length2: 0, |
||||
|
maxSurfaceAngle: 80 |
||||
|
}, |
||||
|
labelLayout: function (params) { |
||||
|
const isLeft = params.labelRect.x < _charts.getWidth() / 2; |
||||
|
const points = params.labelLinePoints; |
||||
|
// Update the end point. |
||||
|
points[2][0] = isLeft |
||||
|
? params.labelRect.x |
||||
|
: params.labelRect.x + params.labelRect.width; |
||||
|
return { |
||||
|
labelLinePoints: points |
||||
|
}; |
||||
|
}, |
||||
|
data: [ |
||||
|
{ value: 1048, name: 'Search Engine' }, |
||||
|
{ value: 735, name: 'Direct' }, |
||||
|
{ value: 580, name: 'Email' }, |
||||
|
{ value: 484, name: 'Union Ads' }, |
||||
|
{ value: 300, name: 'Video Ads' } |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
option && _charts.setOption(option); |
||||
|
|
||||
|
}, |
||||
|
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) { |
||||
|
tableData = data.list.map((item, index) => { |
||||
|
return { |
||||
|
...item, |
||||
|
index: index + 1, |
||||
|
residentNames: item.residentNames || "暂无" |
||||
|
} |
||||
|
}); |
||||
|
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; |
||||
|
this.getUserwarnlist(); |
||||
|
} else { |
||||
|
} |
||||
|
}, |
||||
|
pageSizeChangeHandleNew(val) { |
||||
|
this.pageNo = 1; |
||||
|
this.pageSize = val; |
||||
|
}, |
||||
|
pageCurrentChangeHandleNew(val) { |
||||
|
this.pageNo = val; |
||||
|
this.getUserwarnlist(); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style |
||||
|
lang="scss" |
||||
|
src="@/assets/scss/modules/visual/warning.scss" |
||||
|
scoped |
||||
|
></style> |
||||
|
<style lang="scss" scoped> |
||||
|
.card-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
.title-icon { |
||||
|
display: block; |
||||
|
width: 46px; |
||||
|
height: 34px; |
||||
|
box-sizing: border-box; |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
::v-deep .el-dropdown { |
||||
|
font-size: 16px; |
||||
|
color: #fff; |
||||
|
font-weight: 800; |
||||
|
} |
||||
|
.title-time { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
margin-left: 30px; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
.title-time-label { |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
::v-deep .el-date-editor--month { |
||||
|
width: 100px; |
||||
|
.el-input__inner { |
||||
|
width: 100px; |
||||
|
height: 24px; |
||||
|
box-sizing: border-box; |
||||
|
padding: 0; |
||||
|
font-size: 14px; |
||||
|
color: #fff; |
||||
|
line-height: 24px; |
||||
|
text-align: center; |
||||
|
background: #06186D; |
||||
|
border: 1px solid #1A64CC; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
.el-input__prefix { |
||||
|
display: none; |
||||
|
} |
||||
|
.el-input__suffix { |
||||
|
right: 0; |
||||
|
.el-input__icon { |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.card-echart { |
||||
|
display: flex; |
||||
|
margin-top: 40px; |
||||
|
.card-left { |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.echart-wr { |
||||
|
position: relative; |
||||
|
flex-shrink: 0; |
||||
|
width: 50%; |
||||
|
height: 320px; |
||||
|
box-sizing: border-box; |
||||
|
.echart-org { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.echart-cicle { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
width: 240px; |
||||
|
height: 240px; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: -120px; |
||||
|
margin-left: -120px; |
||||
|
border: 1px dashed rgba(0, 96, 240, 1); |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
</style> |
.echarts-tips { |
||||
|
width: 40%; |
||||
|
// flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.echarts-tips-wd50 { |
||||
|
width: 50%; |
||||
|
} |
||||
|
.tips-list, .tips-item, .tips-lists, .tips-items-num { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.tips-list { |
||||
|
// width: 100%; |
||||
|
// height: 100%; |
||||
|
flex-wrap: wrap; |
||||
|
// justify-content: center; |
||||
|
.tips-item { |
||||
|
// flex: 1; |
||||
|
width: 50%; |
||||
|
margin-top: 20px; |
||||
|
// margin-right: 40px; |
||||
|
cursor: pointer; |
||||
|
.tips-item-icon { |
||||
|
width: 20px; |
||||
|
height: 10px; |
||||
|
box-sizing: border-box; |
||||
|
margin-right: 8px; |
||||
|
background: #1B51FF; |
||||
|
border-radius: 2px; |
||||
|
} |
||||
|
.tips-item-text { |
||||
|
font-size: 16px; |
||||
|
color: #D2E7FF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tips-lists { |
||||
|
width: 100%; |
||||
|
flex-wrap: wrap; |
||||
|
.tips-items { |
||||
|
margin-bottom: 30px; |
||||
|
width: 50%; |
||||
|
.tips-items-title { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.tips-items-num { |
||||
|
justify-content: space-between; |
||||
|
box-sizing: border-box; |
||||
|
margin-top: 20px; |
||||
|
padding-right: 30px; |
||||
|
font-size: 20px; |
||||
|
.tips-item-has { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|||||
Loading…
Reference in new issue